2017-04-25 113 views
0

我有一个固定的div,跟着页面滚动页面顶部时。粘滞的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'); 
      } 
     }); 

任何帮助,将不胜感激

+0

请加上JS提琴或摘录更好地了解... – prog1011

+0

的jsfiddle:https://jsfiddle.net/8t1ddL2h/ – lbollu

+0

是怎么回事的。其他内容的高度,以保持固定在1000像素? – sol

回答

1

你也可以尝试它只是添加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 
     } 

    }); 
+0

如果其他内容是固定的高度,但它会自动运行,所以如果它非常小,则固定侧边栏在接近页面末尾时会消失 – lbollu

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