고정 점 div - 특정 지점에서 스크롤 중지

Question

고정 된 div는 페이지 상단을지나 스크롤 할 때 페이지를 따라갑니다.

일단 특정 div의 맨 아래에 도달하면 스크롤을 중지하고 싶습니다. 나는 자바 스크립트와 잘 어울리지 않는다.

기본적으로 클래스 .affix를 제거해야합니다. 그러나 아래 레이아웃과 겹치지 않도록 오프셋이 필요할 수 있습니다.

다른 기사는 보았지만 div는 고정되어 있지만 광산은 고정되어 있습니다.

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

자바 스크립트 :

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