前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】

💌 作者简介

1. 📖 个人介绍：小伙伴们，大家好！我是水香木鱼，【前端领域创作者】😜
2. 📜 CSDN主页：水香木鱼
3. 📑 个人博客：陈春波
4. 🎨 系列专栏：UI组件库
5. 🌹 一键四连：关注💋+点赞👍+收藏⭐+留言📝
6. 📢 人生箴言：即使没有万全准备，也要勇敢迈出第一步。

1、吸顶效果演示

2、代码实现

①放置吸顶内容

在template放置吸顶的内容

<template>        <div id="outerDivWidth">      <div id="CeilingType" :class="{ CeilingType: fixed }">  <img width="30px" src="../assets/logo.png" alt="" /> <span> 水香木鱼</span>      </div>    </div></template>

②css样式

/* 外层盒子的吸顶固定位置 */.CeilingType {  position: fixed;  top: 2%;}

③定义控件属性

  data() {    return {      offsetTop: 0, //上层控件的位置      offsetWidth: 0, //控件的宽度      outerDivWidth: 0, //外层div      fixed: false, //固定状态    };  },

④初始化加载

在mounted 生命周期钩子中 初始化 对页面的操作更新 mounted() {}

对整个页面滚轮进行监听，每发生一次滚轮事件，调用一次吸顶方法initHeight()

  window.addEventListener("scroll", this.initHeight);

对浏览器窗口大小触发事件进行监听【对id 绑定的元素 outerDivWidth和CeilingType 进行监听】

   window.onresize = () => {      //宽度借用,赋值      this.outerDivWidth = document.getElementById("outerDivWidth").offsetWidth;      this.offsetWidth = this.outerDivWidth - 15;      document.getElementById("CeilingType").style.width =this.offsetWidth + "px";    };

DOM异步更新 对未来更新后的视图进行操作更新后执行

  this.$nextTick(() => {      //获取页面顶端的属性值      var height = document.getElementById("CeilingType");      this.offsetTop = height.offsetTop + 60;      //获取标签的宽度      this.offsetWidth = height.offsetWidth;      console.log(this.offsetWidth, "当前标签的宽度");    });

⑤获取页面的滚动距离initHeight()

  methods: {    initHeight() {      //1、适配浏览器的兼容性，从而获取页面的滚动距离      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;      //2、判断滚动距离是否大于元素到顶端距离      this.fixed = scrollTop > this.offsetTop ? true : false;      //3、将标签的宽度进行赋值      document.getElementById("CeilingType").style.width = this.offsetWidth + "px";    },

⑥移除监听事件

  destroyed() {    //移除监听    window.removeEventListener("scroll", this.initHeight);  },

3、源码：

<template>  <div class="ceiling">    <div id="outerDivWidth">      <div id="CeilingType" :class="{ CeilingType: fixed }">  <img width="30px" src="../assets/logo.png" alt="" /> <span> 水香木鱼</span>      </div>    </div>    <section style="width: 300px">      <p>八月十五夜赠张功曹</p>      <p> 纤云四卷天无河，清风吹空月舒波。 沙平水息声影绝，一杯相属君当歌。 君歌声酸辞且苦，不能听终泪如雨。 洞庭连天九疑高，蛟龙出没猩鼯号。 十生九死到官所，幽居默默如藏逃。 下床畏蛇食畏药，海气湿蛰熏腥臊。 昨者州前捶大鼓，嗣皇继圣登夔皋。 赦书一日行万里，罪从大辟皆除死。 迁者追回流者还，涤瑕荡垢清朝班。 州家申名使家抑，坎轲只得移荆蛮。 判司卑官不堪说，未免捶楚尘埃间。 同时辈流多上道，天路幽险难追攀。 君歌且休听我歌，我歌今与君殊科。 一年明月今宵多，人生由命非由他。 有酒不饮奈明何。      </p>      <br />      <p> 纤云四卷天无河，清风吹空月舒波。 沙平水息声影绝，一杯相属君当歌。 君歌声酸辞且苦，不能听终泪如雨。 洞庭连天九疑高，蛟龙出没猩鼯号。 十生九死到官所，幽居默默如藏逃。 下床畏蛇食畏药，海气湿蛰熏腥臊。 昨者州前捶大鼓，嗣皇继圣登夔皋。 赦书一日行万里，罪从大辟皆除死。 迁者追回流者还，涤瑕荡垢清朝班。 州家申名使家抑，坎轲只得移荆蛮。 判司卑官不堪说，未免捶楚尘埃间。 同时辈流多上道，天路幽险难追攀。 君歌且休听我歌，我歌今与君殊科。 一年明月今宵多，人生由命非由他。 有酒不饮奈明何。      </p>      <br />      <p> 纤云四卷天无河，清风吹空月舒波。 沙平水息声影绝，一杯相属君当歌。 君歌声酸辞且苦，不能听终泪如雨。 洞庭连天九疑高，蛟龙出没猩鼯号。 十生九死到官所，幽居默默如藏逃。 下床畏蛇食畏药，海气湿蛰熏腥臊。 昨者州前捶大鼓，嗣皇继圣登夔皋。 赦书一日行万里，罪从大辟皆除死。 迁者追回流者还，涤瑕荡垢清朝班。 州家申名使家抑，坎轲只得移荆蛮。 判司卑官不堪说，未免捶楚尘埃间。 同时辈流多上道，天路幽险难追攀。 君歌且休听我歌，我歌今与君殊科。 一年明月今宵多，人生由命非由他。 有酒不饮奈明何。      </p>      <p> 纤云四卷天无河，清风吹空月舒波。 沙平水息声影绝，一杯相属君当歌。 君歌声酸辞且苦，不能听终泪如雨。 洞庭连天九疑高，蛟龙出没猩鼯号。 十生九死到官所，幽居默默如藏逃。 下床畏蛇食畏药，海气湿蛰熏腥臊。 昨者州前捶大鼓，嗣皇继圣登夔皋。 赦书一日行万里，罪从大辟皆除死。 迁者追回流者还，涤瑕荡垢清朝班。 州家申名使家抑，坎轲只得移荆蛮。 判司卑官不堪说，未免捶楚尘埃间。 同时辈流多上道，天路幽险难追攀。 君歌且休听我歌，我歌今与君殊科。 一年明月今宵多，人生由命非由他。 有酒不饮奈明何。      </p>    </section>  </div></template><script>export default {  data() {    return {      offsetTop: 0, //上层控件的位置      offsetWidth: 0, //控件的宽度      outerDivWidth: 0, //外层div      fixed: false, //固定状态    };  },  mounted() {    //1、对整个页面滚轮进行监听，每发生一次滚轮事件，执行一次方法    window.addEventListener("scroll", this.initHeight);    //2、对浏览器窗口大小触发事件进行监听    window.onresize = () => {      //3、宽度借用,赋值      this.outerDivWidth = document.getElementById("outerDivWidth").offsetWidth;      this.offsetWidth = this.outerDivWidth - 15;      document.getElementById("CeilingType").style.width = this.offsetWidth + "px";    };    // DOM异步更新 对未来更新后的视图进行操作 在更新后执行    this.$nextTick(() => {      //获取页面顶端的属性值      var height = document.getElementById("CeilingType");      this.offsetTop = height.offsetTop + 60;      //获取标签的宽度      this.offsetWidth = height.offsetWidth;      console.log(this.offsetWidth, "当前标签的宽度");    });  },  methods: {    initHeight() {      //1、适配浏览器的兼容性，从而获取页面的滚动距离      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;      //2、判断滚动距离是否大于元素到顶端距离      this.fixed = scrollTop > this.offsetTop ? true : false;      //3、将标签的宽度进行赋值      document.getElementById("CeilingType").style.width = this.offsetWidth + "px";    },  },  destroyed() {    //移除监听    window.removeEventListener("scroll", this.initHeight);  },};</script><style scoped>.CeilingType {  position: fixed;  top: 2%;}.ceiling {  display: flex;}#outerDivWidth {  width: 190px;}img {  vertical-align: middle;}</style>

📖 博主致谢

感谢大家阅读到结尾，本次的文章就分享到这里，总结了前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】，希望可以帮到大家，谢谢。

如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发 】支持一下哟~~😛您的支持就是我更新的最大动力。👇👇👇👇👇👇

🛩往期精彩：

史上最全的Vue生命周期钩子函数11个

一文图解前端WebSocket 实时通信

如何使用csdn里的自定义模块管理专栏，看这一篇就够了。

码云(gitee)配置ssh密钥的步骤？与解决git每次提交用户名的问题

Visual Studio Code插件-前端工程师开发必备