jquery - 在滚动时切换 CSS 属性

Question

我目前正在尝试在用户向下滚动页面一定距离时向 div 添加 CSS 属性。

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

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

当用户向下滚动页面 209 像素时，我想将 box-shadow: 0px 3px 2px #888888; 属性添加到 #navbar 的 CSS。我已经尝试将它与我在网上找到的 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 { 框阴影:0px 3px 2px #888888； }

Javascript:

$(文档).scroll(函数() { $("#navbar").toggleClass("导航栏滚动", $(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>