前端实现吸顶 uniapp实现吸顶 置顶的效果

最新推荐文章于 2024-08-13 09:26:17 发布
置顶 最新推荐文章于 2024-08-13 09:26:17 发布
阅读量1.6w 收藏 37
点赞数 15
文章标签： css web vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40630924/article/details/106054969
版权

uni-App置顶吸顶

这里要注意不能嵌套 看图
在这里插入图片描述

.questionbag{
	  position: -webkit-sticky;
	  position: sticky;
	  top: var(--window-top);
	  z-index: 99;
  }

web同样可以实现这种效果

top: var(–window-top);其中–window-top这个方法是uni提供的css变量,在web页面可以直接写px,比如写80px他会在距离上边距80px的时候悬浮,可以尝试下

.questionbag{
	  position: -webkit-sticky;
	  position: sticky;
	  top: 80rpx;
	  z-index: 99;
  }

最后的样子
在这里插入图片描述
在这里插入图片描述

臭臭鬼
关注
uni-app 顶部选项卡吸附效果
qq_59795720的博客
05-27 5073
1、页面滚动到该导航位置吸顶 2、tab部分可滑动切换页面 html部分 banner图 <view class="ding">banner</view> tab选项卡、滑动 <view :class="{'st':true,'sticky-fixed':isF}"> <!-- tab部分 --> <swiper class="ct_tab"> <swiper-item :class="{ 'c..
RecyclerView实现吸顶效果
11-19
本教程将详细讲解如何在RecyclerView中实现多布局以及吸顶（Sticky Header）效果。 首先，我们要理解RecyclerView的多布局（Multiple Layout Manager）功能。在RecyclerView中，我们可以为不同的数据项定义多种视图...
uniapp实现吸顶，吸底
04-23
uniapp实现吸顶，吸底 通过createSelectorQuery方法监听，提高性能
CSS样式吸顶
qq_43024468的博客
12-22 779
position: -webkit-sticky; position: sticky; top: var(--window-top);//距离顶部的高度
uni-app 吸顶方案总结
最新发布
qq_39211165的博客
08-13 1251
queryreturnscrollTop: pageScrollTop, //滚动的距离duration: 10 //过渡时间})}).exec()微信是支持offsetTop配置的，但是不知道为什么uni中未生效不然可以写成下边的样子});
uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置 | --window-top和--window-bottom
坚信万物皆可切的切图仔
07-27 1万+
刘海屏 顶部安全区|状态栏高度 var(–status-bar-height) 此变量在微信小程序环境为固定 25px，在 5+App 里为手机实际状态栏高度。 当设置 “navigationStyle”:“custom” 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(–status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。 由于在H5端，不存在原生导航栏和tabbar，也是前端div模拟。如果设置了一个固定位置的view，在小程
uniapp小程序利用transition实现吸顶效果
qq_68153822的博客
06-20 1426
(zero-custom-bar、v-tab是第三方插件库，可以去插件市场搜索。Topbar是我自己封装的一个自定义组件，可以根据手机屏幕的不同动态计算导航栏高度)需要利用scroll-view监听页面滚动距离（注意，需要添加:throttle="false"关闭内置的节流阀）当isshow为true是导航栏就淡出，当isshow为false就淡入。然后利用官网的transition组件实现吸顶效果(选用淡入淡出)scrollTop监听页面滚动变化。
uniapp元素吸底和吸顶效果
weixin_52601258的博客
05-03 3243
元素固定在底部效果 .addLog{ position: fixed; right: 20px; bottom: calc( var(--window-bottom) + 20px); z-index: 1030; margin-bottom: 6; } 元素吸顶效果 .top{ background-color: #f1f1f1; position: -webkit-sticky; position: sticky;
uni-app 滑到一定位置固定某个元素在顶部 吸顶解决方案 APP端 H5端
织网的博客
08-26 6064
uni-app 滑到一定位置固定某个元素在顶部 <template> <view class="content"> <view style="width: 100%; height: 200rpx; border: red solid 1rpx;">导航栏上面内容</view> <view class="switchSign"></view> <view class="tagTop" :class="{ 'topfi
原生js实现吸顶效果
10-20
此外，还可以考虑使用CSS的`position: sticky`属性，该属性在某些现代浏览器中已得到广泛支持，可以更简洁地实现吸顶效果。 总的来说，通过原生JavaScript实现吸顶效果，需要理解滚动事件、元素定位以及浏览器兼容...
window-on-top(windows任意窗口置顶）
07-08
window-on-top(windows任意窗口置顶）窗口置顶 绿色小工具
js实现导航吸顶效果
10-20
本文将详细介绍如何使用JavaScript实现导航栏吸顶效果，并提供示例代码。 首先，需要了解几个关键概念： 1. CSS中的`position`属性： 在实现吸顶效果中，CSS属性`position`扮演重要角色。`position`属性指定了...
Uniapp实现页面滚动Tab吸顶，点击tab内容滚动到对应tab内容位置
weixin_47342624的博客
06-13 1022
data() {return {curTab: 0,tabTop: 0, // tab距离顶部的距离},name: '正文详情',}]name: '相关附件',})name: '图文解读',})},// 点击tab滚动事件if(!0 : (data?},// uni页面滚动监听事件// 获取tabs的距离顶部的距离}).exec();},
uniapp实现吸顶效果、滚动吸顶（分类、筛选、排序、搜索等滚动到顶部自动固定、吸顶）
热门推荐
HuafuCsdn的博客
02-25 1万+
最简单的实现思路有两种： 1.监听滚动距离，当类目滚动到预期范围内时，设置一个特殊的样式，使其脱离文档流固定定位在顶部。 2.不去影响页面中的类目，而是在顶部预先放一个一模一样的类目，预先隐藏，通过监听滚动距离，在适当的时候控制其展示。 两种思路实现都可以，本人跟倾向于第二种实现，因为第二种不会影响原来的页面布局，也更好控制 布局比较简单，不做赘述，在这里简单分享一下uniapp中如何监听滚动获取目标元素位置及配合控制目标显隐，uni.createSelectorQuery()可以创建一个选择器..
uniapp仿支付宝账单月份吸顶功能（代码直接复制可用）
weixin_69666355的博客
07-11 542
【代码】uniapp仿支付宝账单月份吸顶功能（代码直接复制可用）
【前端】uniapp实现美团效果，右侧滑动商品，左侧菜单高亮
tangxz的博客
11-15 2584
有三步 初始化左右滑块的高度 得到右边每个区间的top和buttom 监听右边商品部分滑动事件，如果在某个区间内，则那个区间的菜单名高亮 主界面index.vye <view style="display: flex;"> <!-- 菜单 --> <food-menu :tabBars="tabBars" :tabIndexShow="tabIndexShow" :swiperWidth="menuWidth" :swiperHeight="swiperHeight"
uni app锚点定位 、自动吸顶、滚动自动选择对应的锚点
qq_44678911的博客
08-11 1898
在点击tab的时候，发现当页面的内容有多个不足以撑满屏幕，比如（法务部门、人事部门这个两个tab的时候）（见下图），在前几个tab的被选中，再次点击最后两个tab的时候，会发现最后两个tab在选中的瞬间又会回到运营部门，我回想了问题可能出现在哪里，一想肯定是onPageScroll事件重新触发了，所以我在点击tab的时候，设置了 isTabChange的boolean值，在完成页面滚动的完成事件之后再次设置isTabChange == false，这样避免在这个期间，受到页面监听滚动事件的影响。
uniapp 实现nvue模拟顶部双吸顶+左右滑动切换选项卡(适用于视频播放详情，支持Android、iOS)
ASP.NET
06-29 3012
uniapp 实现nvue模拟顶部双吸顶+左右滑动切换选项卡(适用于视频播放详情，支持Android、iOS)
uniapp中怎么实现吸顶
05-21
在uniapp中实现吸顶效果可以通过以下步骤： 1. 在需要实现吸顶效果的组件或页面中，添加一个固定位置的容器，比如`<view>`。 2. 给该容器设置一个固定的高度，并设置其`position`属性为`fixed`，使其固定在页面顶部。 3. 监听页面的滚动事件，在页面滚动到一定位置时，将容器的`position`属性改为`relative`，使其跟随页面滚动。 下面是一个简单的示例代码： ```html <template> <view> <!-- 固定在页面顶部的容器 --> <view class="sticky-container" :style="{height: containerHeight + 'px', position: sticky ? 'fixed' : 'relative'}"> <!-- 容器中的内容 --> <view class="content">我是吸顶的内容</view> </view> <!-- 页面内容 --> <view class="page-content"></view> </view> </template> <script> export default { data() { return { sticky: false, // 是否启用吸顶效果 containerHeight: 50 // 容器的高度 }; }, mounted() { // 监听页面滚动事件 uni.pageScrollTo({ scrollTop: 0, // 滚动到页面顶部 duration: 0 // 立即滚动，不需要动画效果 }); uni.onPageScroll((e) => { // 当页面滚动到一定位置时启用吸顶效果 if (e.scrollTop >= 100) { this.sticky = true; } else { this.sticky = false; } }); } }; </script> <style> .sticky-container { background-color: #f2f2f2; z-index: 100; } .content { text-align: center; line-height: 50px; } .page-content { height: 1000px; } </style> ``` 在上述示例代码中，我们通过监听`uni.onPageScroll`事件来实现页面滚动的监控，并通过改变`sticky`数据来改变容器的`position`属性。当页面滚动到一定位置时，容器会固定在页面顶部，实现了吸顶效果。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值