사이드 바 바닥이 윈도우 하단에있을 때에 만 붙는 스티키 사이드 바

Question

2 열 레이아웃이 있습니다. 왼쪽 열은 사이드 바보다 길다. 사이드 바가 브라우저 창의 아래쪽에있을 때만 고정 시키길 원합니다. 따라서 사용자는 오른쪽 세로 막대가 붙어있는 동안 왼쪽 열 내용을 아래로 계속 스크롤 할 수 있습니다. 나는 많은 특별한 질문을 여기에서 보았다. 그러나이 특별한 상황은 여전히 ​​나에게 충격을 준다. 나는 또한 왼쪽 열에 막대기 막대를 가지고있어 성공적으로 붙잡아 버렸습니다.

여기에 내가 수행 한 작업의 데모가 jsfiddle입니다!

여기에 제가 시험해보고있는 js에 대한 간략한 설명이 있습니다.

$(function(){ 
     var headlineBarPos = $('.headlineBar').offset().top; // returns number 
     var sidebarHeight = $('.sticky-sidebar-wrap').height(); 
     var sidebarTop = $('.sticky-sidebar-wrap').offset().top; 
     var windowHeight = $(window).height(); 

     var totalHeight = sidebarHeight + sidebarTop; 

    $(window).scroll(function(){ // scroll event 

      var windowTop = $(window).scrollTop(); // returns number 

      // fixing the headline bar  
      if (headlineBarPos < windowTop) { 
       $('.headlineBar').addClass('sticky').css('top', '0'); 
      } 
      else { 
       $('.headlineBar').removeClass('sticky').removeAttr('style'); 
      } 

     if(sidebarHeight < windowTop) { 
      $('.sticky-sidebar-wrap').addClass('sticky').css('top', '0'); 
     } else { 
      $('.sticky-sidebar-wrap').removeClass('sticky').removeAttr('style'); 
     } 

     console.log(windowTop); 

    }); 


    console.log(headlineBarPos); 
    console.log(sidebarHeight); 
    console.log(sidebarTop); 

    }); 

Answer 1

나는 바로 그것을 가지고 희망 사이드 바의 아래쪽이보기로 들어 오면 막대기?

사이드 바의 하단 (사이드 바 내부)에 다른 div를 만들었습니다. 보기에 나타나면 붙어 있습니다.

<div class="moduleController"></div> //inside the sidebar 

및 JS에서 http://jsfiddle.net/Z9RJW/10/

$(function() { 


var headlineBarPos = $('.headlineBar').offset().top; // returns number 
var moduleControllerPos = $('.moduleController').offset().top; // returns number  
var sidebarHeight = $('.sticky-sidebar-wrap').height(); 
var sidebarTop = $('.sticky-sidebar-wrap').offset().top; 
var windowHeight = $(window).height(); 

var totalHeight = sidebarHeight + sidebarTop; 

$(window).scroll(function() { // scroll event 

    var windowTop = $(window).scrollTop(); // returns number 

    // fixing the headline bar  
    if (headlineBarPos < windowTop) { 
     $('.headlineBar').addClass('sticky').css('top', '0'); 
    } else { 
     $('.headlineBar').removeClass('sticky').removeAttr('style'); 
    } 

    if (moduleControllerPos < windowTop + windowHeight) { 
     $('.sticky-sidebar-wrap').addClass('sticky').css('top', '0'); 
    } else { 
$('.sticky-sidebar-wrap').removeClass('sticky').removeAttr('style');  } 






    console.log(windowTop); 

}); 


console.log(headlineBarPos); 
console.log(sidebarHeight); 
console.log(sidebarTop); 

});

도움이되기를 바랍니다.

Answer 2

뭔가처럼 : 너무

if (sidebar.top + sidebar.height < window.scrolltop + window.height) { 
    // set sticky 
} 

사이드 바 뷰포트보다 높을 수 있음을 고려해야 끈적 요구 사항을 설정 :

sidebar.top = sidebar.height - window.height // this will be a negative number