1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】position:stickyでトップ吸い上げアプレット問題を完璧に解決

2022-01-11 20:49:48

最近プロジェクトは、長い時間のためのインターネットでは、満足を見つけるために、2つのタブメニューの吸引トップする必要がありますし、ブログで発見した私は前にこのプロパティを見ていないので、解決するために位置:スティッキーを使用することができますし、検索、使用、小さなデモを書く、かなり良い発見、完璧なソリューションは、遅延はありません。

画像

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>

メイン
{コード
/{br また、トップ値を追加し、トップからどの程度まで吸収するか

興味のある学生は、以下のサイトにアクセスしてください。
mdn-についてもっと知るために

このposition:stickyの記事は、小さなプログラムの吸引トップの問題に対する完璧なソリューションですここで紹介されて、より関連position:sticky小さなプログラムの吸引トップの内容は、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたがよりスクリプトハウスをサポートしています願っています!...