사이드 바가 매우 길 때 화면 이동/고정 사이드 바가 잘립니다.

Question

브라우저를 아래로 스크롤 할 때 사이드 바를 보이게하는 작은 jQuery 스크립트가 있습니다. 그러나 사이드 바가 필터 (드롭 다운 및 체크 박스)를 포함하므로 하단 부분이 잘릴 수 있기 때문에 사이드 바가 길어질 수 있습니다.

나는이 웹 사이트에 같은 영향을 싶습니다 방식으로

http://www.lyst.com/

을, 사이드 바는 긴 경우, 당신은 여전히 ​​위아래로 스크롤 할 수 있습니다. 사이드 바의 맨 아래/상단에 도달하면 고정됩니다.

누구나 내가 정확히 이것을하는 스크립트를 어디에서 얻을 수 있는지 알고 있습니까?

Answer 1

충돌을 피하기 위해 객체를 쉽게 참조 할 수 있도록 CSS 및 HTML 마크 업을 설정하십시오. 해당 참조를 비교할 조건문을 만듭니다.

Firstly, the working jsFiddle.

html로 ->

<div class="content"> 
    <div class="main"> 
     Main Content 
    </div> 
    <div class="sidebar"> 
     Sidebar 
    </div> 
    <div class="footer"> 
     Footer 
    </div> 
</div> 

CSS는 ->

#content{ 
    position:relative; /* required */ 
    height:2000px;  
} 
.main{ 
    margin-left:100px; 
    border:1px solid rgb(120,120,120); 
    height:1500px; 
} 
.sidebar{ 
    position:absolute; /* required */ 
    top:25px; /* required -- does NOT need to be this value, however. */ 
    left:5px; /* required -- does NOT need to be this value, however.*/ 
    border:1px solid rgb(8,8,8); 
    background:rgba(70,70,70,.9); 
    color:#ecebeb; 
    width:93px;  
} 
.footer{ 
    border-top:1px solid #ff0000; 
    height:498px;  
} 

JQuery와 ->

$(window).scroll(function(){ 
    var dist = $(window).scrollTop(); 
    var sTop = $('.sidebar').position().top; 
    var mHeight = $('.main').height(); 
    var userDist = 100; 
    if((sTop > (mHeight - userDist)) && (dist > (mHeight - userDist))){ 
     //the sidebar is pinned now. it won't scroll further. 
    }else if(dist < (mHeight - userDist)){ 
     $('.sidebar').animate({ 
      top: dist + $('.sidebar').height() 
     }, 0);   
    } 
});