1.想实现https://kddi-hikari.com/simul... 该链接中左边sidebar在滚动条下拉到一定位置的时候固定在顶部。
实现思路：position:fixed ;top:0;最便捷的实现方式，我也实现了，
但是我查看了网站的源码是通过 position:relative;
监听scroll事件的scrollTop值top累加实现的，
于是自己想尝试一下，但是发现实现的效果一直会抖动，没办法平滑的定位在顶部。
2.效果还原
<!DOCTYPE html>
<html>
<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>
这段代码就可以看到不能平滑定位的效果，找了两天原因，实在无从下手，还请提供思路。
相关分类