vue事件监听导航滚动位置，显示不同的内容

最新推荐文章于 2023-12-26 09:27:48 发布

RickyJade

最新推荐文章于 2023-12-26 09:27:48 发布

阅读量516

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Shininlee/article/details/127284400

版权

业务是固定导航吸顶显示，到指定位置背景改为白色。

从上面的情况改变为下面的情况。

废话不多说直接上代码。（html、css就不放了）

在这里，我并列写了两个导航用v-show来控制显示。

<div class="part1" id="part1" v-show="showNav">
      <div class="top">
        <div class="left">
          <div class="logo">
            <img src="@/assets/images/logo.png" alt>
          </div>
          <div class="list">
            <slot></slot>
          </div>
        </div>
        <div class="right">
          <div class="right_button1">申请使用</div>
          <div class="right_button2">登录</div>
        </div>
      </div>
    </div>
    <div class="part2" id="part2" v-show="!showNav">
      <div class="top">
        <div class="left">
          <div class="logo">
            <img src="@/assets/images/logo.png" alt>
          </div>
          <div class="list">
            <slot></slot>
          </div>
        </div>
        <div class="right">
          <div class="right_button1">申请使用</div>
          <div class="right_button2">登录</div>
        </div>
      </div>
    </div>

js部分：

export default {
  data() {
    return {
      showNav: true
    }
  },
  mounted() {
    // 事件监听滚动条
    window.addEventListener('scroll', this.watchScroll)
  },
  methods: {
    watchScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      //  当滚动超过 450 时，实现吸顶效果
      if (scrollTop > 450) {
        this.showNav = false
      } else {
        this.showNav = true
      }
    }
  },
  destroyed() {
    //离开这个界面之后，删除滚动事件，不然容易除bug
    window.removeEventListener('scroll', this.watchScroll)
  }
}