小さなプログラムが天井に張り付いてしまう問題を完璧に解決するためにposition:stickyを使用する方法

最近、あるプロジェクトのクライアントが、上部に 2 つのタブメニューを配置することを要求しました。私は長い間オンラインで検索しましたが、満足のいく解決策を見つけることができませんでした。その後、ブログで、position:sticky を使用してこの問題を解決できることを知りました。この属性はこれまで見たことがなかったので、検索して使い方を学び、小さなデモを作成しました。すると、非常に使いやすく、遅延なく問題を完全に解決することがわかりました。

ここに画像の説明を挿入

html:

<テンプレート>
	<ビュークラス="">
		<ビュークラス="">
			<ビュークラス="ボックス">
				
			</ビュー>
			<view class="tabbar t1">
				タブバー
			</ビュー>
			<ビュークラス="ボックス">
				
			</ビュー>
			<view class="tabbar t2">
				タブバー
			</ビュー>
			<view class="item" v-for="(item,index) 20 個中" :key='index' >
				{{アイテム}}
			</ビュー>
		</ビュー>
	</ビュー>
</テンプレート>

<スクリプト>
</スクリプト>

CS: ...

<スタイル>
	。箱{
		高さ: 30vh;
		境界線: 1px 実線 #007AFF;
	}
	.タブバー{
		背景: #fff;
		位置: -webkit-sticky;
		位置: 固定;
		背景: #4CD964;
		高さ: 50upx;
		
	}
	.t1{
		上: -1upx;
	}
	.t2{
		上: 50upx;
	}
	。アイテム{
		高さ: 100upx;
		下部マージン: 20upx;
		背景: #007AFF;
	}
</スタイル>

主に
position: -webkit-sticky; position: sticky;
また、天井が上端からどのくらい離れているかを示す上端値も追加します。

興味のある学生は
MDN – 深い理解

これで、position:sticky を使用して、小さなプログラムが天井に張り付く問題を完璧に解決する方法についての記事は終了です。position:sticky の小さなプログラムが天井に張り付く問題に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: HTML で入力プロンプトのテキストスタイルを変更するためのサンプルコード

>>: Web ページのエンコーディングで gbk や gb2312 ではなく utf-8 が使用されるのはなぜですか?