Question

我有一个小的jQuery脚本，可以在向下滚动浏览器时保持侧边栏可见。但是，边栏可能会很长，因为它会包含过滤器（下拉列表和复选框），因此底部会被切断。

我想在这个网站上产生效果：

http://www.lyst.com/

在某种程度上，当侧边栏很长时，您仍然可以向上和向下滚动。它只有在到达侧边栏的底部/顶部时才会固定。

有谁知道我在哪里可以得到一个完全执行此操作的脚本？

Answer 1

以一种方式设置CSS和HTML标记，以便您轻松引用要避免碰撞的对象。创建条件语句来比较所述引用。

Firstly, the working jsFiddle.

HTML - ＆gt;

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

CSS - ＆gt;

#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 - ＆gt;

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

当侧边栏很长时，滚动/固定侧边栏会被切断

1 个答案: