切换滚动CSS属性

Question

我目前正在尝试添加一个CSS属性到一个div当用户已滚动一定距离的页面。

<div id="navbar">...</div> 

#navbar { 
    position: fixed; 
    width: 100%; 
    height: 55px; 
    padding: 1px; 
    padding-left: 20px; 
    background: #009688; 
} 

我想box-shadow: 0px 3px 2px #888888;属性添加到CSS的#navbar，当用户滚动209px下跌的一页。我试图把这些与我在网上找到的jQuery放在一起，但由于我没有使用jQuery的经验，所以我无法让它工作。

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

和：

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

我希望我是有道理的。提前感谢您的帮助。

Answer 1

在您的CSS中创建另一个类并使用javascript进行切换。

CSS：

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

的Javascript：

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

摘录如下：

$(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>