1.在吸顶组件上动态绑定class:
<div class="header-box" :class="isFixed ? 'is_fixed': ''"></div>
2.data中需要定义:
isFixed: false,
3.css中设置class:
.is_fixed {
position: fixed;
top: 0;
width: 100%;
}
4.在mounted上添加监听:
mounted() {
window.addEventListener('scroll', this.initHeight)
},
5.methods定义方法:(以310px为例)
initHeight() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
this.isFixed = scrollTop > 310 ? true : false;
},
6.destroyed中销毁监听:
destroyed() {
window.removeEventListener("scroll", this.initHeight, false)
},
转载自: 使用原生js实现吸顶功能_AnitaOvO的博客-CSDN博客_js吸顶系列文章目录提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加例如:第一章 Python 机器学习入门之pandas的使用提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例https://blog.csdn.net/weixin_43478503/article/details/116425262