用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解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 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
mysq GBKl乱码
2006/11/28 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
javascript 简练的几个函数
2009/08/29 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
python多线程抓取天涯帖子内容示例
2014/04/03 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
董事长职责范文
2013/11/08 职场文书
捐书活动总结
2014/05/04 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
业务员岗位职责
2015/02/03 职场文书
《所见》教学反思
2016/02/23 职场文书
vue实现滑动解锁功能
2022/03/03 Vue.js
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏
MySQL分区路径子分区再分区
2022/04/13 MySQL