用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 相关文章推荐
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 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内置函数使用指南
2014/11/27 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
大二自我鉴定范文
2013/10/05 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
学习三严三实心得体会
2014/10/13 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle