右侧栏滚动到顶部自动固定教程代码

全新xiuno专业插件模板教程交流站：【xiuno顶尖网】欢迎你！

在其他前端框架里面，这个功能叫做：图钉。

大概功能就是：

如果页面东西过多，用户滚动到下面去了，想快速发帖什么的不方便。

* P/ Q! b! R( l; ?1 G3 B0 ^! @

1. <script>
2.     window.onscroll = function () {
3.       var topScroll = document.documentElement.scrollTop;//滚动的距离,距离顶部的距离
4.       var bignav = document.getElementsByClassName("aside")[0];//获取到导航栏id
5.       var left = document.getElementsByClassName("aside")[0].getBoundingClientRect().left;
6.       var width=document.getElementsByClassName("aside")[0].getBoundingClientRect().width;
7.       if (topScroll > 210 && Math.abs(topScroll-document.documentElement.scrollHeight)>600) { //当滚动距离大于250px时执行下面的东西
8.         bignav.style.position = 'fixed';
9.         bignav.style.top = '10px';
10.         bignav.style.left = '' + left + 'px';
11.         bignav.style.width = '' + width + 'px';
12.         bignav.style.zIndex = '9999';
13.       } else {//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状
14.         bignav.style.position = 'static';
15.       }
16.     }
17.   </script>

复制代码