Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

最新推荐文章于 2025-05-14 15:47:02 发布

weixin_30721077

最新推荐文章于 2025-05-14 15:47:02 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui 前端 ViewUI

原文链接：http://www.cnblogs.com/mouseleo/p/10948904.html

本文介绍了使用 Vue 事件监听实现导航栏吸顶效果，即页面未滑动时导航栏正常显示，页面向上滑动后导航栏固定在页面上方。具体实现步骤包括写入事件监听滚动条、在 methods 中写 watchScroll 方法，以及在对应标签加入修改后的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

Howie126313 关注

2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0

所说的吸顶效果就是在页面没有滑动之前，导航栏的效果如下图所示：

当页面向上滑动之后，导航栏始终固定在页面的上方。

具体代码：

写入事件监听，监听滚动条。

mounted () {
      // 事件监听滚动条
      window.addEventListener('scroll', this.watchScroll)
    }

然后在 methods 中写入 watchScroll 方法。

methods: {
      watchScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        // 当滚动超过 50 时，实现吸顶效果 if (scrollTop > 49) { this.navBarFixed = true } else { this.navBarFixed = false } } }

在对应的标签中加入修改后的样式

<div :class="navBarFixed == true ? 'navBarWrap' :''">

.navBarWrap {
    position:fixed;
    top:0;
    z-index:999; }

END~~

转载于:https://www.cnblogs.com/mouseleo/p/10948904.html