vue3实现吸顶

最新推荐文章于 2024-05-23 14:48:13 发布

张张张爱学习

最新推荐文章于 2024-05-23 14:48:13 发布

阅读量604

点赞数 1

分类专栏： Vue3 文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_45233925/article/details/126563164

版权

Vue3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html

如果isFixed为true，实现吸顶，此处通过ref获取吸顶元素

<div :class="isFixed ? 'is-fixed' : 'title'" ref="fixedName">
        文章标题
 </div>

css

//不吸顶
.title {
    font-size: 30px;
    font-weight: 500;
    color: #222222;
    line-height: 60px;
    text-align: center;
  }
//吸顶
  .is-fixed {
    position: fixed;
    top: 0;
    z-index: 100;
    font-size: 30px;
    font-weight: 500;
    color: #222222;
    line-height: 80px;
    text-align: center;
    width: 100%;
    height: 80px;
    background-color: #fff;
  }

vue

首先在onMounted生命周期中监听页面的滚动事件

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

在onUnmounted生命周期中卸载监听事件

 onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

首先得到页面滚动的距离，如果页面滚动的距离大于吸顶元素距离页面顶部的距离，就展示使吸顶元素的isFixed为true，即实现吸顶功能。

const handleScroll = () => {
  let scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
  isFixed.value =
    scrollTop > fixedName.value.getBoundingClientRect().top ? true : false;
};