vue3实现吸顶效果

一.HTML

用样式控制，如果isFixed 等于true，将内容固定到顶部

<div :class="isFixed ? 'is-fixed' : 'txt'" ref="fixedName">到顶就被吸住啦
</div>

二.CSS

//不吸顶
.txt{font-size: 30px;font-weight: 500;color: #222222;line-height: 60px;text-align: center;}
//吸顶.is-fixed {position: fixed;top: 0;z-index: 100;width: 335px;left: 20px;background-color: #FFFFFF;padding: 15px;box-sizing: border-box;font-size: 30px;font-weight: 500;color: #222222;line-height: 60px;text-align: center;}

三.JS

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

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

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

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

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

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

以上代码就能实现吸顶效果。

vue3实现吸顶效果相关推荐

30秒实现Vue吸顶效果
酱酱,好久不见鸭! 前言:吸顶效果图: 1.滚动前: image.png 2.滚动中: image.png 3.滚动超过后: image.png 直观效果可参pc端微博左侧的信息栏第一步:html ...
vue音乐项目歌手页面滚动、吸顶效果
总结singer页面: 1.api中去获取 ['热',A-Z] 以及根据['热',A-Z]获取的所有歌手的数据 2.渲染数据 2.1 渲染左边字母title ['热',A-Z] + 该字母开头的歌手 ...
微信小程序中实现吸顶效果(流畅、不卡顿)
欢迎访问我的个人博客最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了. 原因是我不停的去 setData 会导致操作反馈延迟严重,无法及时将操作处理结果及时传 ...
最贴近京东首页体验的嵌套滑动吸顶效果
吸顶效果是各家 App 或多或少都会用的一个交互,这种交互也常见于 PC.H5,可以说是一种通用性很强的前端交互体验,相比较来说京东首页的嵌套滑动吸顶效果是各个类似效果中体验比较好的一个,因为在嵌套布 ...
vue中怎么实现吸顶效果
在 web 应用中,我们经常需要让页面中的一个或多个元素在页面滚动时保持固定位置.这种效果通常被称为吸顶效果,因为它使元素像粘在页面顶部一样固定不动. 在 Vue 中,实现吸顶效果有不同的方法.本文将 ...
Android - 吸顶效果布局篇
调研了一下微博和豆瓣等大体量的APP,发现内容详情页的评论吸顶效果非常常见. 以截图自豆瓣的效果为例,当上划至内容部分消失时,滑动中的回复条会置顶,并保持在位置不动. 笔者通过实践,记录下目前发现的最 ...
Flutter吸顶效果
前言: 关于吸顶效果,在Flutter当中,已经提供了这么一个控件,但是由于太复杂,所以网上的资料有些少,本文章主要利用Flutter自带的这种吸顶动画控件,配合着动画完成的一个用户中心的页面. im ...
flutter 吸顶效果
flutter 吸顶问题今天在做一个吸顶效果时,发现了一些问题: 我是用的是官方widget CustomScrollView+SliverAppBar 可向下拉伸并虚化背景功能代码: Custo ...
滚动页面，实现导航栏固定在顶部（吸顶效果）
内容说明页面中有导航栏,当页面滚动超出一定范围时,它会固定在设置好的位置,一般是固定在顶部. 本文有两种方式实现,一种是sticky,兼容不好:另外一种是sticky的解体..兼容效果万能 1.首先 ...

vue3实现吸顶效果

vue3实现吸顶效果相关推荐

最新文章

热门文章