So verwenden Sie position:sticky, um das Problem kleiner Programme, die an der Decke haften, perfekt zu lösen

Kürzlich bestand der Kunde eines Projekts darauf, zwei Tab-Menüs oben anzuordnen. Ich suchte lange online, konnte aber keine zufriedenstellende Lösung finden. Dann sah ich in einem Blog, dass ich position:sticky verwenden könnte, um dieses Problem zu lösen. Da ich dieses Attribut noch nie zuvor gesehen hatte, suchte ich danach, lernte, wie man es verwendet, schrieb eine kleine Demo und stellte fest, dass es sehr einfach zu verwenden ist und das Problem perfekt und ohne Verzögerung löst.

html:

<Vorlage>
	<Klasse anzeigen="">
		<Klasse anzeigen="">
			<Klasse anzeigen="Box">
				
			</Ansicht>
			<Ansichtsklasse="tabbar t1">
				Tab-Leiste
			</Ansicht>
			<Klasse anzeigen="Box">
				
			</Ansicht>
			<Ansichtsklasse="tabbar t2">
				Tab-Leiste
			</Ansicht>
			<Ansichtsklasse="Artikel" v-for="(Artikel,Index) in 20" :Schlüssel='Index' >
				{{Artikel}}
			</Ansicht>
		</Ansicht>
	</Ansicht>
</Vorlage>

<Skript>
</Skript>

CSS:

<Stil>
	.Kasten{
		Höhe: 30vh;
		Rand: 1px durchgezogen #007AFF;
	}
	.tabbar{
		Hintergrund: #fff;
		Position: -WebKit-Sticky;
		Position: klebrig;
		Hintergrund: #4CD964;
		Höhe: 50upx;
		
	}
	.t1{
		oben: -1upx;
	}
	.t2{
		oben: 50upx;
	}
	.Artikel{
		Höhe: 100upx;
		Rand unten: 20upx;
		Hintergrund: #007AFF;
	}
</Stil>

Hauptsächlich
position: -webkit-sticky; position: sticky;
Fügen Sie auch einen oberen Wert hinzu, der angibt, wie weit die Decke von der Oberkante entfernt ist

Interessierte Studierende können sich an
MDN – Vertieftes Verständnis

Damit ist der Artikel zur Verwendung von position:sticky zur perfekten Lösung des Problems kleiner Programme, die an der Decke kleben, abgeschlossen. Weitere relevante Inhalte zu position:sticky, kleinen Programmen, die an der Decke kleben, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!