js实现吸顶效果

今天在项目里遇到一个 吸顶 的需求，在这里记录一下js的写法

思路： 先在mounted里用window.addEventListener监听一下鼠标滚轮事件，再用getBoundingClientRect().top获取需要吸顶的box距离顶部的值，判断这个值是否<=0，如果是就给全局变量zyFixed赋值为true，在div里用三元运算进行判断，符合条件就添加一个isFixed类名。

<template>
  <div class="zy" id="zyId">
    <div class="zy_left" ref="zyScroll">
      <div :class="[zyFixed == true ? 'isFixed' :'','zy_left_con']">
          <p>吸顶box</p>
      </div>
    </div>
    <div class="zy_right">
      
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zyFixed: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);//监听鼠标滚轮
  },
  methods: {
    handleScroll: function() {
        let offsetTop = this.$refs.zyScroll.getBoundingClientRect().top;//需要吸顶的box距离顶部的值
        this.zyFixed = offsetTop <= 0;//判断当box距离顶部距离<=0时,this.zyFixed为true,给box添加isFixed类
    },
  }
};
</script>

<style lang="less" scoped>
.isFixed {
  position: fixed;
  top: 0;
}
</style>

此时，在其他页面因为获取不到#zyId，会报错，只需要判断是否获取到#zyId即可

handleScroll: function() {
      let zy_ele = document.getElementById("zyId");//获取dom
      if(zy_ele){//对dom进行判断，确定当前是否是需要吸顶的页面
		let offsetTop = this.$refs.zyScroll.getBoundingClientRect().top;//需要吸顶的box距离顶部的值
        this.zyFixed = offsetTop <= 0;//判断当box距离顶部距离<=0时,this.zyFixed为true,给box添加isFixed类
	  }
    },

css的position属性可以更简单的实现吸顶效果，详情点此☛