スティッキー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'}); 
     } 
    }); 
    } 
});