側邊欄非常長時滾動/固定側欄會被切斷

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