用position:sticky完美解决小程序吸顶问题的实现方法_CSS

上一篇: Css预编语言及区别详解下一篇:CSS3实现红包抖动效果

用position:sticky完美解决小程序吸顶问题的实现方法

发布时间：2022-04-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了用position:sticky完美解决小程序吸顶问题的实现方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

最近一个项目甲方一定要两个tab菜单吸顶，在网上找了好久没找到满意的，然后在一个博客中发现可以用posITion:sticky解决，因为之前没见过这个属性，然后搜了下，了解了用法，写了个小demo，发现挺好用的，完美解决不卡顿。

在这里插入图片描述

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小程序吸顶内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！

脚本宝典总结

以上是脚本宝典为你收集整理的用position:sticky完美解决小程序吸顶问题的实现方法全部内容，希望文章能够帮你解决用position:sticky完美解决小程序吸顶问题的实现方法所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：position:sticky

上一篇: Css预编语言及区别详解下一篇:CSS3实现红包抖动效果

猜你在找的CSS相关文章