How to use position:sticky to perfectly solve the problem of small programs adhering to the ceiling

Recently, the client of a project insisted on having two tab menus mounted on the top. I searched for a long time online but couldn’t find a satisfactory solution. Then I saw in a blog that I could use position:sticky to solve this problem. Since I had never seen this attribute before, I searched for it, learned how to use it, wrote a small demo, and found that it is very easy to use and perfectly solves the problem without lag.

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>

Mainly
position: -webkit-sticky; position: sticky;
Also add a top value, how far from the top the ceiling is

Interested students can go to
MDN – In-depth understanding

This concludes the article on how to use position:sticky to perfectly solve the problem of small programs being stuck to the ceiling. For more relevant position:sticky small programs being stuck to the ceiling content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!