vue中实现元素吸顶效果

分手后的思念是犯贱 2021-07-25 13:40 936阅读 0赞

## 效果图： ##

![20210502105208962.gif][]

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

## 代码实现： ##

<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>

[20210502105208962.gif]: /images/20210725/84d317d6a0ae4cda9be50b0206e25115.png

发表评论取消回复

表情：

评论列表（有 0 条评论，936人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue监听滚动事件实现元素吸顶

添加滚动监听事件： mounted () \{ window.addEventListener('scroll', this.handleScroll) \},

偏执的太偏执、/ 2023年06月14日 04:27/ 0 赞/ 12 阅读

相关 vue-cli4项目中的吸顶效果

1.html  <div id="showDays" :class="

「爱情、让人受尽委屈。」/ 2022年12月02日 00:49/ 0 赞/ 184 阅读

相关微信小程序实现吸顶效果

先看一下效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

叁歲伎倆/ 2022年11月27日 10:29/ 0 赞/ 312 阅读

相关元素滚动吸顶效果

position: sticky 粘性定位的元素是依赖于用户的滚动. 它的行为就像 position:relative，而当页面滚动超出目标区域时，它的表现就像 posit

曾经终败给现在/ 2022年11月03日 10:43/ 0 赞/ 224 阅读

相关小程序吸顶效果

<template> <view class="full"> <view class="full222"> </vie

比眉伴天荒/ 2022年10月05日 08:58/ 0 赞/ 228 阅读

相关 html设置吸顶效果

html设置吸顶效果方法一：js设置 window.onscroll = function () { // 滑动时搜索框吸顶

青旅半醒/ 2022年09月03日 05:17/ 0 赞/ 534 阅读

相关 vue监听滚动事件实现元素吸顶-getBoundingClientRect()

需求顶部有banner，当屏幕向上滑动超出banner高度时出现导航思路监听scroll，通过判断当前元素与顶部的距离，来控制导航的显隐实现

亦凉/ 2022年05月15日 01:29/ 0 赞/ 646 阅读

相关 js 吸顶 vue 吸顶

页面吸顶的效果，实现有两种，最快的一种是用position: sticky方法，不过该方法尚存在兼容性问题，使用的时候需加入兼容方法。使用方法跟position:

客官°小女子只卖身不卖艺/ 2022年01月23日 13:11/ 0 赞/ 343 阅读

相关微信小程序wxs实现吸顶效果

在.js文件中使用page的onPageScroll事件和scroll-view的scroll事件中产生卡顿 (setData 渲染会阻塞其它脚本执行，导致了整个用户交互的

淡淡的烟草味﹌/ 2021年11月09日 12:38/ 0 赞/ 627 阅读

相关 vue中实现元素吸顶效果

效果图： ![20210502105208962.gif][] 注意：窗口会抖动，体验不是很好，后期再优化代码实现： <template>

分手后的思念是犯贱/ 2021年07月25日 13:40/ 0 赞/ 937 阅读