用position:sticky完美解決小程序吸頂問(wèn)題的實(shí)現(xiàn)方法

發(fā)布時(shí)間：2021-04-23 16:11:17 作者：淺淺池塘清清水

這篇文章主要介紹了用position:sticky完美解決小程序吸頂問(wèn)題的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

最近一個(gè)項(xiàng)目甲方一定要兩個(gè)tab菜單吸頂，在網(wǎng)上找了好久沒(méi)找到滿意的，然后在一個(gè)博客中發(fā)現(xiàn)可以用position:sticky解決，因?yàn)橹皼](méi)見(jiàn)過(guò)這個(gè)屬性，然后搜了下，了解了用法，寫(xiě)了個(gè)小demo，發(fā)現(xiàn)挺好用的，完美解決不卡頓。

在這里插入圖片描述

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;
還要加個(gè)top值，離頂部多少距離吸頂

感興趣的同學(xué)可以去
mdn–深入了解

到此這篇關(guān)于用position:sticky完美解決小程序吸頂問(wèn)題的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)position:sticky小程序吸頂內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！