0
我有兩列的容器,其中一列包含側欄。如何在容器的末端設置固定的側欄停止位置
側邊欄是固定的,當它快要到我使用jQuery來改變底部的bottom
有它大致停留在容器的底部。
我該如何做到這一點,當它撞到容器的底部(用紅色標出)時,它會完全停止移動?它必須適用於任何高度的側欄。
HTML
<div class="container">
<div class="col-left">
<div class="sidebar">
fixed sidebar
</div>
</div>
<div class="col-right">
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
</div>
<footer>Footer</footer>
CSS
.container {
outline: 1px solid red;
position: relative;
}
.col-left {
width: 58%;
display: inline-block;
outline: 1px solid black;
vertical-align: top;
height: 100%;
}
.col-right {
width: 40%;
display: inline-block;
outline: 1px solid black;
vertical-align: top;
}
.sidebar {
position: fixed;
top: 50px;
left: 50px;
height: 200px;
width: 100px;
background: #fff;
}
footer {
background: #000;
width: 100%;
height: 300px;
margin-top: 100px;
color: #fff;
}
jQuery的(懷疑它會使用我認爲這需要重新思考)
jQuery(window).scroll(function(){
var scrollBottom = jQuery(document).height() - jQuery(this).scrollTop() - jQuery(this).height();
console.log(scrollBottom);
if (scrollBottom < 300){
jQuery('.sidebar').css('bottom', Math.abs(scrollBottom - 420));
jQuery('.sidebar').css('top', 'auto');
} else {
jQuery('.sidebar').css('bottom', 'auto');
jQuery('.sidebar').css('top', '50px');
}