JS实现侧边栏固定效果

JS实现侧边栏固定效果

1、 创建三个用于滑动的div和一个侧边栏容器，并设置相应样式。

2、 获取主内容与侧边栏容器，绑定滚动监听事件

3、 当页面滚动至main区域时，侧边栏设为固定定位，其顶部距离等于main上方元素及其外边距之和。

4、 当鼠标滑动时若main盒子不在顶部，则将其侧边距调整为与样式设定一致。

5、 最后在浏览器中滑动查看侧边栏效果

6、 监听页面滚动，当滚动距离超过设定值时，将侧边栏设为固定定位并调整上边距；未达到时则保持原有样式。