鍍金池/ 問答/HTML/ position absolute 怎么可以跟著頁面滾動(dòng)！

position absolute 怎么可以跟著頁面滾動(dòng)！

<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>

救向下滾動(dòng)， div 位置
clipboard.png

向下滾動(dòng) div 在屏幕的位置沒有動(dòng)并無滾動(dòng)
clipboard.png

怎么改css能讓 div跟著滾動(dòng)條滾動(dòng)。

回答
編輯回答
笨笨噠

你給父元素設(shè)置position:relative沒有用嗎？

2017年4月25日 19:35
編輯回答
毀了心

目前暫未發(fā)現(xiàn)僅通過CSS實(shí)現(xiàn)此效果的，但有其他的通用實(shí)現(xiàn)思路：

假設(shè)該元素<div>距離頂部滾動(dòng)高度為x，監(jiān)聽瀏覽器的滾動(dòng)高度:

  1. 當(dāng)瀏覽器的滾動(dòng)高度大于或等于x的時(shí)候，將該元素的css設(shè)置為position: fix; top: 0
  2. 當(dāng)瀏覽器的滾動(dòng)高度小于x時(shí)，將其還原。

以下為JQuery代碼：

// 假設(shè)該元素的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;
}
2018年8月9日 05:07