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'});
      }
    });
  }
});

Answer 2

您也可以尝试添加 JavaScript。它将自动计算左面板的高度。删除css时需要更改css。

var othercon = $('.other-content').offset().top;
var sliderheight = $( ".sticky-sidebar" ).height();
$(window).scroll(function() {  
        if ($(window).scrollTop() >= othercon-sliderheight) {
            $('.sticky-sidebar').removeClass('affix');
              // need to change here according to your need
        }

    });