知识点回顾:
1, 得到一个元素在页面文档中的距离顶部的距离
var banner = document.querySelector(".banner")
console.log(banner.offsetTop)
2,监听浏览器滚动条的变化
document.addEventListener("scroll", function() {
var root = document.documentElement || document.body;
console.log(root.scrollTop)
})
3,让定位的元素贴在版心的左右侧,而不是文档
.slider-bar {
position: absolute;
left: 50%;
top: 300px;
/* 版心的距离估计是1200px */
margin-left: 600px;
width: 45px;
height: 130px;
background-color: pink;
}
4,js 直接更新获取滚动条的距离,可见api 不断更新
window.pageYOffset
————————————————————
有了上面知识的铺垫,就可以完整淘宝右侧侧边栏
我就不写了,直接贴模拟代码:
<!