用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实现超酷的黑猫警长首页
Apr 26 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 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输出指定时间以前时间格式的方法
2015/03/21 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
Javascript面向对象编程
2012/03/18 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
vue--vuex详解
2019/04/15 Javascript
javascript实现日历效果
2019/06/17 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
Python求解平方根的方法
2015/03/11 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
PyTorch基本数据类型(一)
2019/05/22 Python
python pygame实现五子棋小游戏
2020/10/26 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
学python最电脑配置有要求么
2020/07/05 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
应届毕业生个人求职自荐信
2014/01/06 职场文书
消防安全责任书
2014/04/14 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
民事二审代理词
2015/05/25 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS