鍍金池/ 問答/HTML/ scrollTop定位div元素抖動問題

scrollTop定位div元素抖動問題

1.想實現(xiàn)https://kddi-hikari.com/simul... 該鏈接中左邊sidebar在滾動條下拉到一定位置的時候固定在頂部。

實現(xiàn)思路：position:fixed ;top:0;最便捷的實現(xiàn)方式，我也實現(xiàn)了，
但是我查看了網(wǎng)站的源碼是通過 position:relative; 
監(jiān)聽scroll事件的scrollTop值top累加實現(xiàn)的，
于是自己想嘗試一下，但是發(fā)現(xiàn)實現(xiàn)的效果一直會抖動，沒辦法平滑的定位在頂部。

2.效果還原

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>
<script src='https://cdn.bootcss.com/jquery/3.2.1/jquery.js'></script>
<style>
    body{height: 2002px;}
</style>

</head>
<body>

<div style="position: absolute;width: 100px;height: 100px;background-color: orange" id="test">
<script>

var test = $('#test');

$(window).on('scroll',function(){
var bodyScroll = document.documentElement.scrollTop ;
bodyScroll = $(window).scrollTop();
//bodyScroll = parseInt(bodyScroll);
test.css("top",bodyScroll+100+'px')

})
</script>
</body>
</html>


這段代碼就可以看到不能平滑定位的效果，找了兩天原因，實在無從下手，還請?zhí)峁┧悸贰?/code>
回答
編輯回答
避風(fēng)港

通過transform來寫動畫，不要用top，當(dāng)頁面在滾動時，調(diào)整translate值就行了

補充：

var test = $('#test'),
    bodyScroll = 0;
$(window).on('scroll',function(){
     bodyScroll = $(window).scrollTop();
});

function loop(){
    requestAnimationFrame(loop);
    test.css("top",bodyScroll + 100 + "px");
};

requestAnimationFrame(loop);
2017年11月21日 15:39