用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 24 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 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运行时强制显示出错信息的代码
2011/04/20 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
python中模块的__all__属性详解
2017/10/26 Python
python文件拆分与重组实例
2018/12/10 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
业务部门经理岗位职责
2014/02/23 职场文书
护理专业自荐信范文
2015/03/06 职场文书
高中数学课堂教学反思
2016/02/18 职场文书