今天在项目里遇到一个 吸顶
的需求,在这里记录一下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类
}
},