用position:sticky完美解决小程序吸顶问题的实现方法


Posted in HTML / CSS onApril 24, 2021

最近一个项目甲方一定要两个tab菜单吸顶, 在网上找了好久没找到满意的,然后在一个博客中发现可以用position:sticky解决,因为之前没见过这个属性,然后搜了下,了解了用法,写了个小demo,发现挺好用的,完美解决不卡顿。

用position:sticky完美解决小程序吸顶问题的实现方法

用position:sticky完美解决小程序吸顶问题的实现方法

html:

<template>
	<view class="">
		<view class="">
			<view class="box">
				
			</view>
			<view class="tabbar t1">
				tabbar
			</view>
			<view class="box">
				
			</view>
			<view class="tabbar t2">
				tabbar
			</view>
			<view class="item" v-for="(item,index) in 20" :key='index' >
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
</script>

css:

<style>
	.box{
		height: 30vh;
		border: 1px solid #007AFF;
	}
	.tabbar{
		background: #fff;
		position: -webkit-sticky;
		position: sticky;
		background: #4CD964;
		height: 50upx;
		
	}
	.t1{
		top: -1upx;
	}
	.t2{
		top: 50upx;
	}
	.item{
		height: 100upx;
		margin-bottom: 20upx;
		background: #007AFF;
	}
</style>

主要是
position: -webkit-sticky; position: sticky;
还要加个top值,离顶部多少距离吸顶

感兴趣的同学可以去
mdn–深入了解

到此这篇关于用position:sticky完美解决小程序吸顶问题的实现方法的文章就介绍到这了,更多相关position:sticky小程序吸顶内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3之多背景background使用示例
Oct 18 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
Aug 07 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
六种css3实现的边框过渡效果
Apr 22 #HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
CSS预处理框架——Stylus
Apr 21 #HTML / CSS
基于CSS3画一个iPhone
You might like
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
Python enumerate遍历数组示例应用
2008/09/06 Python
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
升职演讲稿范文
2014/05/23 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
个人学习总结范文
2015/02/15 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS
nginx之queue的具体使用
2022/06/28 Servers