vue中实现元素吸顶效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue中实现元素吸顶效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含847字，纯文字阅读大概需要2分钟。

内容图文

效果图：

 

注意：窗口会抖动，体验不是很好，后期再优化

代码实现：

<template>
  <div>
    <div style="height: 100px;"></div>
    <div
      style="width:100px;height:100px;margin-left:30px;border:1px solid red;color:black"
      :class="{isFixed:isFixed}"
    >scrollTop:{{scrollTop}}</div>
    <div style="height: 1000px;"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isFixed: false,
      scrollTop: ""
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (this.scrollTop >= 100) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>
<style lang="scss" scope>
.isFixed {
  position: fixed;
  top: 0;
  background-color: yellow;
  z-index: 999;
}
</style>

 

内容总结

以上是互联网集市为您收集整理的vue中实现元素吸顶效果全部内容，希望文章能够帮你解决vue中实现元素吸顶效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---