vue-cli4项目中的吸顶效果 「爱情、让人受尽委屈。」 2022-12-02 00:49 149阅读 0赞 ### 1.html ### <!-- 原理:根据屏幕滚动的距离,动态控制class的值,控制元素的位置。 --> <div id="showDays" :class="headerFixed?'issFixed':''"> <van-tabs v-model="active"> <van-tab title="标签 1">内容 1</van-tab> <van-tab title="标签 2">内容 2</van-tab> <van-tab title="标签 3">内容 3</van-tab> </van-tabs> </div> ### 2. javascript ### data() { return { headerFixed:0, //是否吸顶 条件 offsetTop:0 //元素的offsetTop } }, mounted() { // 监听dom渲染完成 this.$nextTick(function(){ // 这里fixedHeaderRoot是吸顶元素的ID let header = document.getElementById("showDays"); // 这里要得到top的距离和元素自身的高度 this.offsetTop = header.offsetTop; console.log("offsetTop:" + this.offsetTop); }); // handleScroll为页面滚动的监听回调 window.addEventListener('scroll', this.handleScroll); }, destroyed(){ window.removeEventListener('scroll', this.handleScroll); }, methods: { handleScroll(){ // 得到页面滚动的距离 let scrollTop = window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop; // 判断页面滚动的距离是否大于吸顶元素的位置 console.log("divoffsetTOP"+document.getElementById("showDays").offsetTop); //如果滚动距离 大于元素的offsetTop 就返回1,吸顶 //如果滚动距离 小于元素的offsetTop 就返回0,不吸顶 this.headerFixed=scrollTop>this.offsetTop?1:0 }, ### 3. css ### .issFixed{ position: fixed; top:0px; left:0px; right:0px; z-index: 4; }
还没有评论,来说两句吧...