position absolute 怎么可以跟着页面滚动！

Question

<tr>
<td><%=i%></td>
<td><input type="checkbox" class="checkbox" value="<%=i%>"></td>
<td>C20180712001</td>
<td>上海万象汽车制造有限公司</td>
<td>张三</td>
<td><%=date()%></td>
<td><span></span></td>
<td><div style="position:absolute; width:100px; height:20px; background:#09F;"></div></td>
<td> </td>
</tr>

救向下滚动， div 位置

向下滚动 div 在屏幕的位置没有动并无滚动

怎么改css能让 div跟着滚动条滚动。

Answer 1

你给父元素设置position:relative没有用吗？

Answer 2

目前暂未发现仅通过CSS实现此效果的，但有其他的通用实现思路：

假设该元素<div>距离顶部滚动高度为x，监听浏览器的滚动高度:

1. 当浏览器的滚动高度大于或等于x的时候，将该元素的css设置为position: fix; top: 0
2. 当浏览器的滚动高度小于x时，将其还原。

以下为JQuery代码：

// 假设该元素的class为xxx
var $xxx = $('.xxx').offset().top
$(window).scroll(function() {
    var currTop = $(document).scrollTop();
    if(currTop >= x) {
        $xxx.addClass('fix')
    } else if{
        $xxx.removeClass('fix')
    }
})

css:

.xxx.fix {
    position: fixed;
    top: 0;
}