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

在这里插入图片描述

💌 作者简介

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

1、吸顶效果演示

在这里插入图片描述

2、代码实现

①放置吸顶内容

在template放置吸顶的内容

<template>
    <!--此处的id="outerDivWidth" 为外层div的宽度-->
    <div id="outerDivWidth">
       <!--此处的id="CeilingType" 为获取元素的dom-->
      <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");
      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");
      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插件-前端工程师开发必备

posted @ 2022-06-21 08:44  水香木鱼  阅读(584)  评论(0)  编辑  收藏  举报