Heim > Artikel > Web-Frontend > Fallstrick-Datensatz, wenn position:sticky auf ein Bootstrap-Floating-Layout stößt
Fallstrick-Datensatz, wenn position:sticky auf ein Bootstrap-Floating-Layout stößt
- 青灯夜游nach vorne
- 2018-10-10 17:41:133385Durchsuche
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!