WordPress的jQuery帮助：在滚动偏移顶部添加类

Question

这给了我一头白发。

我希望在元素到达屏幕顶部时为其添加一个类。代码在我的codepen中工作，如果我在chrome中以控制台输入它，但不是我添加到wordpress。我的所有其他脚本都运行正常，该怎么办？

我发现的所有脚本所做的就是在滚动时立即添加课程，而不是它 - 它不会删除它或在假设时添加它。

我发现了几个脚本，如果你有更好的功能，可以免费添加。

＆＃13;

＆＃13;

(function($) {
  var item = $('.item').offset().top;
  $(window).scroll(function(){    
      if ($(this).scrollTop() > item){ 
          $('.item').addClass('addclass'); 
      }
      else{
          $('.item').removeClass('addclass');
      }
  });
})(jQuery);

＆＃13;

div {
  position: relative;
  top: 0;
  width: 100%;
  display: block;
  transition: all ease .3s;
}

#wrapper {
  background: pink;
  height: 2000px;
}

.navigation {
  height: 60px;
  background: lime;
  
}
.block {
  background: lightblue;
  height: 300px;
}
.item {
  background: purple;
  height: 300px; 
}
.item.addclass {
  position: fixed;
  z-index: 1;
  height: 120px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="wrapper">
    <div class="navigation">
        <!-- There are some list elements here -->
    </div>
    <div class="block"> BLOCK</div>
    <div class="item">ITEM</div> 
    <div class="block"> BLOCK</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

经过多个小时的反复试验后，我发现了这个小片段，它完美地完成了这项工作：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    var objectSelect = $(".item");
    var objectPosition = objectSelect.offset().top;
    if (scroll > objectPosition) {
        $(".item").addClass("change");
    } else {
        $(".item").removeClass("change");
    }
});

Answer 2

如果您想简化一些事情并且不太关心旧浏览器，我建议您使用position: sticky

您只需要几行代码即可完成。详细了解职位和更多示例here

＆＃13;

＆＃13;

(function($) {

    var item = $('.item'),
	top = item.offset().top;
	$(window).scroll(function() {
	   $(window).scrollTop() > top ? item.addClass('sticky') : item.removeClass('sticky');
	});

})(jQuery);

＆＃13;

div {
  position: relative;
  top: 0;
  width: 100%;
  display: block;
  transition: all ease .3s;
}

#wrapper {
  background: pink;
  height: 2000px;
}

.navigation {
  height: 60px;
  background: lime;

}
.block {
  background: lightblue;
  height: 300px;
}
.item {
  background: purple;
  height: 300px; 
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  z-index: 999;
  top: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <div class="navigation">
        <!-- There are some list elements here -->
    </div>
    <div class="block"> BLOCK</div>
    <div class="item">ITEM</div> 
    <div class="block"> BLOCK</div>
</div>

＆＃13;

＆＃13;

＆＃13;