粘滯的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

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

    }); 

Answer 2

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