[英]Scrolling/fixed sidebar gets cut off when sidebar is very long
我有一個小的jQuery腳本,可在您向下滾動瀏覽器時使邊欄保持可見。 但是,側邊欄會很長,因為它將包含過濾器(下拉列表和復選框),因此底部會被截斷。
我想在此網站上產生類似的效果:
在某種程度上,當側邊欄很長時,您仍然可以上下滾動。 它只有在到達側欄的底部/頂部時才會變得固定。
有人知道我在哪里可以准確地獲得腳本嗎?
設置CSS和HTML標記的方式可以輕松引用要避免與之沖突的對象。 創建條件語句以比較所述引用。
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);
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.