监听滚动条事件来实现导航栏吸顶效果

最新推荐文章于 2024-06-13 13:22:01 发布

研0

最新推荐文章于 2024-06-13 13:22:01 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript css3 html

本文链接：https://blog.csdn.net/qq_51009027/article/details/121287465

首先要实现监听滚动条的位置：
（1）在mounted钩子函数中随便定义一个方法来获取滚动条变化：

      window.addEventListener('scroll', this.handleScroll, true)

（2）将其加入到设置的方法中：

methods:{
      handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        }

（3）方便在浏览器中观察是否监视成功，可以在其方法中加入：

 console.log(scrollTop)

（4）监视成功会显示如下：请添加图片描述

监听工作完成后，接下来就到判断滚动条变化距离是否大于导航栏到顶部的距离了。
（1）在上面方法中加入（其中的#footer和div中的class和id相对应）：

var offsetTop = document.querySelector('#footer').offsetTop
//如果滑动距离大于元素到顶部的距离就使用searchBarFixed
        if (scrollTop > offsetTop) {
          this.searchBarFixed = true
        } else {
          this.searchBarFixed = false
        }

（2）在data中添加searchBarFixed变量并赋值其空。

data() {
      return {
        searchBarFixed:''
      }
      }

判断工作完成后，就该样式变换环节了。
（1）如果滚动条距离大时，就使用isFixed的样式。否则使用原样式。

#footer .isFixed{
  position:fixed;
  background-color:#Fff;
  top:0;
  z-index:999;
}

（2）在导航栏中加入三目运算来实现样式的最终变换：

<el-menu>
:class="searchBarFixed === true ? 'isFixed' :''"
...//其他样式就不贴了
</el-menu>

最后贴一下主要布局标签(主要是方便对照上面的关键变量)：

 <div class="footer" id="footer">
      <el-row>
  <el-menu
  :class="searchBarFixed === true ? 'isFixed' :''"
  </el-menu>
      </el-row>
     </div>

附一下效果图：
最后跳转页面时，控制台会爆红。
但是也不影响这个效果。但是强迫症得我受不了。解决方法是：去另一个页面时将该监听事件移除

//和mounted函数同一级别。离开页面的时候，便会调用这个函数(具体可以看看vue的的生命周期)，我们常用来销毁一些监听事件及定时函数
destroyed () {
      window.removeEventListener('scroll', this.handleScroll)
    }

参考博客：参考博客