Question

我想检查用户是否滚动了页面，如果他们这样做了，我想要更改元素的填充。

＆＃13;

$(document).ready(function() {
	
	if (document.body.scrollTop !== 0) {
		$(".nav-link").children().css("padding", "1em");
	};
});

＆＃13;

.navbar .nav-link a {
	font-family: 'Ubuntu', sans-serif;
	font-weight: bold;
	padding: 2em;
	color: #808080;
}

＆＃13;

<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <li class="nav-link"><a class="page-active" href="#">Link 1</a></li>
    <li class="nav-link"><a href="#">Link 2</a></li>
    <li class="nav-link"><a href="#">Link 3</a></li>
    <li class="nav-link"><a href="#">Link 4</a></li>
    <li class="nav-link"><a href="#">Link 5</a></li>
    <li class="nav-link"><a href="#">Link 6</a></li>
  </ul>
</div>

＆＃13;

Answer 1

尝试......

$(document).on('scroll', function() {
    if (document.body.scrollTop !== 0) {
        $(".nav-link").children().css("padding", "1em");
    };
});

每次滚动事件触发时，包装器都会执行if条件。

<强>更新：

滚动实际上可以准备进入文档内部。文档就绪函数只确定文档对象模型何时完成加载，因此它是一次性事件。

Answer 2

我相信你有错字（？）它应该是：

#navbar .nav-link a {

另外，我建议你进行一些检查以防用户重新登上并使用css类来改变填充，例如：

jQuery(document).ready(function() {
  jQuery(window).scroll(function () {
      if (jQuery(this).scrollTop() > 0) {
          jQuery('.nav-link').addClass("padnav");
      } else {
        jQuery('.nav-link').removeClass("padnav");
      }
  });
});

然后加入css：

#navbar .nav-link.padnav a {
  padding: 1em;
}

向下滚动更改填充

2 个答案: