Web-Frontend
HTML-Tutorial
Fallstrick-Datensatz, wenn position:sticky auf ein Bootstrap-Floating-Layout stößt
Fallstrick-Datensatz, wenn position:sticky auf ein Bootstrap-Floating-Layout stößt
Als ich zum ersten Mal mit dem Attribut position:sticky in Berührung kam, wurde mir klar, dass viele frühere JS-Szenen mit diesem CSS-Attribut umgeschrieben werden konnten. Beispielsweise müssen viele Anzeigen auf der rechten Seite der Website nach dem Scrollen nach oben korrigiert werden. Es handelt sich dabei um vollständig klebrige Anwendungen.
Worüber wir heute sprechen werden, ist die Verzeichnisleiste auf der rechten Seite der Artikeldetailseite. Wenn die Seite nach unten verschoben wird, wird sie auch oben auf der Seite angezeigt Wird verwendet, um das Scroll-Ereignis abzuhören und es dann anhand der Position zu beurteilen. Die feste Lösung wurde aus bestimmten Gründen beschlossen, sie in Sticky umzuschreiben.
wurde in nur wenigen Strichen geschrieben. Ich habe den Scroll-Ereignis-Listener entfernt und dann den Stil .post-nav zum Menüelement position:sticky; top:0 hinzugefügt, aber es hat nicht funktioniert!
Wtf! Verwirrt begann ich nach dem Grund zu suchen. Ich habe danach gesucht. Es hieß, dass das übergeordnete Element des Elements möglicherweise das Überlaufattribut verarbeitet hat, z. B. das Hinzufügen von overflow:hidden oder so, aber nachdem ich es mir angesehen hatte, war dies nicht der Fall.
Dann habe ich mich gefragt, ob es vielleicht ein Problem mit dem Bootstrap-Layout ist (tatsächlich hat es etwas damit zu tun), also habe ich die Demo geschrieben:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<style>
body {font-size: 50px; font-weight: 900;}
.main {height: 2000px; background: #eee}
.menu {height: 200px; background: yellow}
.ad {height: 200px; background: red; position: sticky; top: 0px;}
.guess {height: 200px; background: blue;}
</style>
</head>
<body>
<p class="container">
<p class="row">
<p class="col-md-8 main">content</p>
<p class="col-md-4">
<p class="menu">menu</p>
<p class="ad">ad</p>
<p class="guess">others</p>
</p>
</p>
</p>
</body>
</html>Aber kein Problem, Ich dachte plötzlich, dass die von der Website verwendete Bootstrap-Version 3.x ist, und änderte sie dann auf Version 3.3.7. Zu diesem Zeitpunkt trat das Problem auf.
Zu diesem Zeitpunkt ist das Problem einfacher zu lokalisieren. 4.x verwendet das Flex-Layout, während 3.x immer noch das Float-Layout verwendet. Das Problem sollte hier liegen.
Endgültiger Code (siehe diese Ausgabe):
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
body {font-size: 50px; font-weight: 900;}
.main {height: 2000px; background: #eee}
.side {height: 2000px;}
.menu {height: 200px; background: yellow}
.ad {height: 200px; background: red; position: sticky; top: 0px;}
.guess {height: 200px; background: blue;}
</style>
</head>
<body>
<p class="container">
<p class="row">
<p class="col-md-8 main">content</p>
<p class="col-md-4 side">
<p class="menu">menu</p>
<p class="ad">ad</p>
<p class="guess">others</p>
</p>
</p>
</p>
</body>
</html> entspricht der ursprünglichen Frage, da das Menü zum .col-md-3-Element gehört, also muss das .col-md-3 auf der rechten Seite das sein Dasselbe wie das .col-md-9 auf der linken Seite. Halten Sie es einfach sehr konsistent und fügen Sie diese Codezeile hinzu:
$('.side').height($('.main').height())
Da der Inhaltsbereich auf der linken Seite das Laden von Bildern verzögert, muss diese Codezeile ausgeführt werden kontinuierlich:
$(window).scroll(function() {
$('.side').height($('.main').height())
// other code
// ...
})Zusammenfassung: Das Obige ist Der gesamte Inhalt dieses Artikels soll für das Studium aller hilfreich sein. Weitere verwandte Tutorials finden Sie unter HTML-Video-Tutorial!
Verwandte Empfehlungen:
PHP-Video-Tutorial zum Gemeinwohltraining
Das obige ist der detaillierte Inhalt vonFallstrick-Datensatz, wenn position:sticky auf ein Bootstrap-Floating-Layout stößt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
