vue javascript页面吸顶 (网站下滑时自定义导航栏自动吸顶)

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