在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

position absolute 怎么可以跟著頁面滾動！

<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 位置
clipboard.png

向下滾動 div 在屏幕的位置沒有動并無滾動
clipboard.png

怎么改css能讓 div跟著滾動條滾動。

回答
編輯回答
笨笨噠

你給父元素設置position:relative沒有用嗎？

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

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

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

  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;
}
2018年8月9日 05:07