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>

向下滚动时删除粘性类？

1 个答案: