js固定侧边栏

时间:2024-10-19 06:36:08

1、首先写好3个div供页面滑动和一个侧边栏盒子,并写好样式

js固定侧边栏

2、接着获取main和侧边栏盒子,并添加滚动事件

js固定侧边栏

3、然后当页面滑到main盒子时,让侧边栏为固定定位,并且侧边栏上边距为main上方的盒子及间距

js固定侧边栏

4、如果鼠标滑动不是main盒子在最上方,那么就让侧边距和样式中设置的相同

js固定侧边栏

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

js固定侧边栏

6、总结:对页面添加滚动事件,当滚动距离超过设置大小就使侧边栏为固定定位并设置它的上边距,否则就为样式的设置相同

js固定侧边栏
© 手抄报圈