右侧栏滚动到顶部自动固定教程代码-Xiuno资源-魔趣建站-我们共同的建站资源共享平台！

右侧栏滚动到顶部自动固定教程代码 [复制链接]

moqu8 2019-4-9

2053 0

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

大概功能就是：

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

<script>

    window.onscroll = function () {

      var topScroll = document.documentElement.scrollTop;//滚动的距离,距离顶部的距离

      var bignav = document.getElementsByClassName("aside")[0];//获取到导航栏id

      var left = document.getElementsByClassName("aside")[0].getBoundingClientRect().left;

      var width=document.getElementsByClassName("aside")[0].getBoundingClientRect().width;

      if (topScroll > 210 && Math.abs(topScroll-document.documentElement.scrollHeight)>600) { //当滚动距离大于250px时执行下面的东西

        bignav.style.position = 'fixed';

        bignav.style.top = '10px';

        bignav.style.left = '' + left + 'px';

        bignav.style.width = '' + width + 'px';

        bignav.style.zIndex = '9999';

      } else {//当滚动距离小于250的时候执行下面的内容，也就是让导航栏恢复原状

        bignav.style.position = 'static';

      }

    }

  </script>