电商项目导航固定组件

通过动态类名show来控制显示隐藏

vue2.0

 data () {
    return {
      isShow: true
    }
  },
  created () {
    window.onscroll = () => {
      const scrollTop = document.documentElement.scrollTop
      if (scrollTop > 100) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    }
  }

vue3.0

 setup () {
    const isShow = ref(false)
    onMounted(() => {
      window.onscroll = () => {
        const scrollTop = document.documentElement.scrollTop
        scrollTop > 100 ? isShow.value = true : isShow.value = false
      }
    })
    return { isShow }
  }

插件(vueuse)

vueuse只能在vue3.0中使用

1.安装

npm i @vueuse/core@5.0.3

2.导入

import { useWindowScroll } from '@vueuse/core'

3.使用

const { x, y } = useWindowScroll()