侧边栏非常长时滚动/固定侧栏会被切断

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