Vue-页面滚动后导航栏固定上方

思路:

步骤:

一、获取页面向下滚动的高度

  1. 页面下滚高度:document.documentElement.scrollTop 获取
  2. 页面上swiper等高度通过ref获取。即:首先为<swiper ref=”myswiper”>等组件添加ref属性。再使用 this.$refs.myswiper.$el.offsetHeight获取不同设备上的swiper高度。

二、当前页面的Vue文件中添加判断逻辑

if (下滚高度>=swiper高度) {
  navbar固定
} else {
    navbar不固定
}

三、navbar固定|不固定的实现

// 通过动态增加class实现。当navbar有fix属性时才固定,反之则不固定。使用三目运算符动态添加 class=fixed 或 class=''。
<navbar :class="isFixed ? 'fixed':''"></navbar>

四、在页面中定义函数,实现判断功能

结合二三步骤,在页面的<script>中完善逻辑。通过定义handleScroll,再在methods中实现。

Fix:增加生命周期控制。在页面载入时开始scroll的监听。在页面销毁时,取消scroll监听。

// film.vue
<script>
// 引入navbar
import navbar from '@/views/navbar'
export default {
  // 轮播图列表
  data () {
    return {
      ...,
      // isFixed默认值
      isFixed: false
    }
  },
  components: {
    ...,
    navbar
  },
  mounted () {
    ...,
    // 页面载入后,下滚导航固定
    window.onscroll = this.handleScroll
  },
  beforeDestroy() {
    // 页面销毁前取消监听
    window.onscroll = null
  },
  methods: {
    // 页面下滚导航固定方法
    handleScroll () {
      if (document.documentElement.scrollTop >= this.$refs.myswiper.$el.offsetHeight) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    }
  }
}
</script>

五、在navbar组件中,设定class=fixed的样式

// navbar.vue
<style lang="scss" scoped>
  ...
  .fixed {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 40px;
    background: white;
  }
</style>