Question

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

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

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

当用户向下滚动页面209px时，我想将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 { box-shadow: 0px 3px 2px #888888; }

使用Javascript：

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

以下代码段：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

滚动时切换CSS属性

1 个答案: