我目前正在尝试制作屏幕右侧的浮动表,同时在左侧有其他内容。
使用bootstrap class="col-md-6
分隔左右列。
使表浮动很容易,但我希望它停止浮动在左手div的底部。
我按照本教程https://stackoverflow.com/a/8653109/9364403
当我的浮动div到达div的底部时,它会改变为position:absolute;
。
但是,当位置设置为绝对时,表格将返回到div顶部的位置,而不会保持在底部。当我向后滚动一点时,桌子会重新浮动。
我怎样才能确保浮动div不会像上面显示评论链接的jsfiddle一样跳回来? (qazxsw poi)
当前的HTML:
http://jsfiddle.net/Kkv7X/
当前的js:
<div class="container">
<div class="row" id="">
<div class="col-md-6">
Content for the left hand column
</div>
<div class="col-md-6" style="position:relative;">
<div class="positionfixed" id="fixedcard">
<table class="table" id="recipetable">
<tr class="tablerow">
<th class="tableheader" style="width:45%;">header 1</th>
<th class="tableheader" style="width:25%;">header 2</th>
<th class="tableheader" style="width:30%;">header 3</th>
<th class="tableheader" style="width:30%;">header 4</th>
</tr>
<tr class="tablerow">
<td>row 1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tablerow">
<td>row 2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tablerow">
<td>row 3</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tablerow">
<td>row 4</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tablerow" id="TableTotalRow">
<td>row 5</td>
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="stop">
</div>
目前的css:
function checkOffset() {
if($('#fixedcard').offset().top + $('#fixedcard').height() >= $('#stop').offset().top - 10){
$('#fixedcard').css('position', 'absolute');
}
if($(document).scrollTop() + window.innerHeight < $('#stop').offset().top){
$('#fixedcard').css('position', 'fixed'); // restore when you scroll up
}
}
$(document).scroll(function() {
checkOffset();
});
我做了一个jsFiddle我的代码目前正在做什么: .positionfixed{
position: fixed;
}
谢谢。
当您更改为https://jsfiddle.net/fjfkbrtn/12/时,只需将absolute
CSS属性设置为0px,并在位置返回bottom
时将其更改回来,如下所示:
fixed