随着右侧滚动条滚动，右侧定位的元素样式发生变化

知识点回顾：

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

————————————————————

 

有了上面知识的铺垫，就可以完整淘宝右侧侧边栏

我就不写了，直接贴模拟代码：

<!