2016-03-31 21 views
0

Kullanıcı, sayfada belirli bir mesafe kaydırdığında, bir CSS özelliğini bir div'a eklemeye çalışıyorum.Kaydırma üzerindeki CSS özelliğini değiştir

<div id="navbar">...</div> 
#navbar { 
    position: fixed; 
    width: 100%; 
    height: 55px; 
    padding: 1px; 
    padding-left: 20px; 
    background: #009688; 
} 

Ben kullanıcı sayfasına aşağı 209px kaydırılan zaman, #navbar için CSS box-shadow: 0px 3px 2px #888888; özelliği eklemek istiyorum. Bunu çevrimiçi olarak bulduğum jQuery ile bir araya getirmeyi denedim, ama jQuery ile hiçbir deneyimim olmadığından, çalışamadım.

$("#navbar").css("box-shadow", "0px 3px 2px #888888"); 

Ve:

$(document).scroll(function() { 
    $('#navbar').toggle($(this).scrollTop()>209) 
});​ 

ben mantıklı umuyoruz. Herhangi bir yardım için şimdiden teşekkür ederiz.

cevap

1

CSS'nizde başka bir sınıf oluşturun ve javascript kullanarak değiştirin.

CSS:

.navbar-scrolled { box-shadow: 0px 3px 2px #888888; }

JavaScript:

$(document).scroll(function() { $("#navbar").toggleClass("navbar-scrolled", $(document).scrollTop() >= 209); });

Pasaj aşağıda:

$(document).scroll(function() { 
 
    $("#navbar").toggleClass("navbar-scrolled", $(document).scrollTop() >= 209); 
 
});
#navbar { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 55px; 
 
    padding: 1px; 
 
    padding-left: 20px; 
 
    background: #009688; 
 
} 
 
.navbar-scrolled { 
 
    box-shadow: 0px 3px 2px #888888; 
 
} 
 
#page-filler { 
 
    height: 1000px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="navbar">navbar</div> 
 
<div id="page-filler"></div>

İlgili konular