javascript - Sticky div - 在某个点停止滚动

Question

我有一个固定的 div，当页面滚动到页面顶部时，它会跟随页面。

我希望它在到达特定 div 的底部后停止滚动。我不太擅长 JavaScript。

基本上需要删除类.affix。但它可能需要一个偏移量，以便它不会与下面的布局重叠。

我看过其他文章，但 div 一开始是固定的，而我的则变得固定。

JSfiddle:https://jsfiddle.net/8t1ddL2h/

Javascript:

var stickySidebar = $('.sticky-sidebar').offset().top;
        $(window).scroll(function() {  
            if ($(window).scrollTop() > stickySidebar) {
                $('.sticky-sidebar').addClass('affix');
            }
            else {
                $('.sticky-sidebar').removeClass('affix');
            }  
        });

如有任何帮助，我们将不胜感激

李

Answer 1

Try this Fiddle

$(document).ready(function() {    
  var $sticky = $('.sticky-sidebar');
  var $stickyrStopper = $('.other-content');
  if (!!$sticky.offset()) { // make sure ".sticky" element exists

    var generalSidebarHeight = $sticky.innerHeight();
    var stickyTop = $sticky.offset().top;
    var stickOffset = 0;
    var stickyStopperPosition = $stickyrStopper.offset().top;
    var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
    var diff = stopPoint + stickOffset;

    $(window).scroll(function(){ // scroll event
      var windowTop = $(window).scrollTop(); // returns number

      if (stopPoint < windowTop) {
          $sticky.css({ position: 'absolute', top: diff });
      } else if (stickyTop < windowTop+stickOffset) {
          $sticky.css({ position: 'fixed', top: stickOffset });
      } else {
          $sticky.css({position: 'absolute', top: 'initial'});
      }
    });
  }
});