我想要建立一个页面,就像Facebook
或Twitter
,其中中间div滚动不定式,左或右div只滚动到其height
,然后停在那里。向下滚动固定位置div,然后停止
在我的网站中,我也在右侧显示中间div和一些fixed
高度数据中的不定数据。我想scroll
两个div与页面scroll
和右div停止滚动,当它达到其高度,并停留在那里。
我所做的是先制作position: static
,当它到达bottom
的右格时,使其成为fixed
。但这不是我想要的,因为当我将static
更改为fixed
时,右div再次返回顶部。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> I am using style disple flex bcoz I dont know how to use bootstap here(On this site)</div>
<div class="col=lg-12" style="display:flex">
<div class="col-lg-3" style="position:fixed;float:left;left:0">some text</div>
<div class="col-lg-6" id="displayPost" style="float:left;left:0;right:0;text-align:center">post display using ajax<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br></div>
<div id="staticDiv" class="col-lg-3" style="height:100px;float:right;right:0">//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br></div>
</div>
JS代码:
$(document).ready(function() {
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('#staticDiv').height()) {
$('#staticDiv').css({
position: 'fixed'
});
} else {
$('#staticDiv').css({
position: 'absolute'
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> I am using style disple flex bcoz I dont know how to use bootstap here(On this site)</div>
<div class="col=lg-12" style="display:flex">
<div class="col-lg-3" style="position:fixed;float:left;left:0">some text</div>
<div class="col-lg-6" id="displayPost" style="float:left;left:0;right:0;text-align:center">post display using ajax<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br></div>
<div id="staticDiv" class="col-lg-3" style="height:200px;float:right;right:0">//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br>//some text<br></div>
</div>
$(document).ready(function() {
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('#staticDiv').height()) {
$('#staticDiv').css({
position: 'fixed'
});
} else {
$('#staticDiv').css({
position: 'absolute'
});
}
});
});
所有我想要的是右侧格留在底部,而中间格保持滚动固定。
老实说,我只想用这个库:http://leafo.net/sticky-kit/ – Kiwad
@Kiwad thnkx乌拉圭回合回应,我会在这个战利品。 – Vivek