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

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



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


具体代码:

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

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~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,283评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,437评论 25 709
  • 打开Axure,在菜单项中,点击 "团队" 菜单,选择 "获取团队项目": 切换到 "SVN" 选项, 填写正确的...
    围观群众代表阅读 2,227评论 0 0
  • 很巧地看到一篇《从离职看一个人的格局》,正面反面几个案例发人深省给人启示。 格局可以分为几度:零度,盲众,看不见-...
    叮当小娟阅读 223评论 0 0
  • 我端着一杯冒着热气的咖啡,惬意的坐在阳台上的的摇椅上,当然是放下了咖啡,我不知为何特别享受坐在摇椅上的感觉,阳光如...
    你好涵阅读 579评论 1 9