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

鍍金池/ 問(wèn)答/HTML/ scrollTop定位div元素抖動(dòng)問(wèn)題

scrollTop定位div元素抖動(dòng)問(wèn)題

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

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

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>


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

通過(guò)transform來(lái)寫(xiě)動(dòng)畫(huà)，不要用top，當(dāng)頁(yè)面在滾動(dòng)時(shí)，調(diào)整translate值就行了

補(bǔ)充：

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