jquery - 向下滚动时删除粘性类？

Question

这是我的 jQuery 代码，用于在向下滚动时删除粘性类。

$(window).scroll(function (e) {
    if ($('.main_form_wrapper').length != 0) {
        var window_scroll = $(window).scrollTop();
        console.log(window_scroll, "window scroll")
        var bottom_position = window_scroll + $('.main_form_wrapper').outerHeight(true);
        console.log(bottom_position, "form_position for footer")
        var form_top_offset = $('.main_form_wrapper').offset().top;
        console.log(form_top_offset, "form top offset")
        var footer_top_offset = $('.top_footer').offset().top;
        console.log(footer_top_offset,"footer top offset")
        if (window_scroll > form_top_offset &&  bottom_position < footer_top_offset) {
            $(".main_form_wrapper").addClass('sticky'); 
        } else {
            console.log('here')
            $(".main_form_wrapper").removeClass('sticky');  
        }
    }
});

请帮助任何知道它的人。

Answer 1

95% 是 Detecting scroll direction 的副本

我花时间为您创建了一个示例。我认为您缺少的要点是您需要存储最后的滚动位置以了解用户是向上还是向下滚动页面。就这么简单:

var lastScrollTop = 0;
var theWrap = $('.wrap');
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
       theWrap.removeClass('sticky');
   } else {
      // upscroll code
       theWrap.addClass('sticky');
   }
   lastScrollTop = st;
});

.wrap {
  width: 100px;
  height: 2000px;
  background-color: orange;
}
.wrap.sticky {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap sticky">

</div>