用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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 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
多重?l件?合查?(一)
2006/10/09 PHP
多php服务器实现多session并发运行
2006/10/09 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
PHP中使用curl入门教程
2015/07/02 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
js实现全选和全不选
2020/07/28 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
基于数据归一化以及Python实现方式
2018/07/11 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
Python如何测试stdout输出
2020/08/10 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
应征英语教师求职信
2013/11/27 职场文书
七年级政治教学反思
2014/02/03 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
国庆横幅标语
2014/10/08 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
2015年读书月活动总结
2015/03/26 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
话题作文之自信作文
2019/11/15 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
详解python网络进程
2021/06/15 Python