Web Front-end
HTML Tutorial
Pitfall record when position:sticky encounters bootstrap floating layout
Pitfall record when position:sticky encounters bootstrap floating layout
When I first came into contact with the position:sticky attribute, I realized that many previous js scenes could be rewritten using this css attribute. For example, many advertisements on the right side of the website need to be fixed after scrolling up. They are completely sticky applications.
What I want to talk about today is the directory bar on the right side of the article details page. When the page slides down, it will also be fixed to the top of the page. Previously, js was used to listen to the scroll event, and then judged based on the position, toggle The fixed solution, for some reasons, decided to rewrite it in sticky.
It’s finished in a few clicks, remove the scroll event listener, and then add the position:sticky; top:0 style to the menu element .post-nav, but, Doesn’t work!
wtf! Puzzled, I started searching for the reason. I found this in so. It said that the parent element of the element may have processed the overflow attribute, such as adding overflow:hidden or something, but after looking at it, this is not the case.
Then I wondered if it might be a problem with the bootstrap layout (in fact, it is related), so I wrote the demo:
<!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>But there was no problem, and suddenly I thought that the bootstrap version used by the website was 3. x, and then changed it to version 3.3.7. At this time, the problem came out.
The problem is easier to locate at this time. 4.x uses flex layout, while 3.x still uses float floating layout. The problem should be here.
Final code (refer to this issue):
<!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> corresponds to the initial question, because the menu belongs to the .col-md-3 element, so the one on the right .col-md-3 needs to be highly consistent with .col-md-9 on the left. Add this line of code:
$('.side').height($('.main').height())
because the left The content area has delayed loading of images, so this line of code needs to be executed continuously:
$(window).scroll(function() {
$('.side').height($('.main').height())
// other code
// ...
})Summary: The above is the entire content of this article, I hope it will be helpful to everyone's learning. For more related tutorials, please visit HTML Video Tutorial!
Related recommendations:
php public welfare training video tutorial
The above is the detailed content of Pitfall record when position:sticky encounters bootstrap floating layout. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Table Border in HTML
Sep 04, 2024 pm 04:49 PM
Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.
Nested Table in HTML
Sep 04, 2024 pm 04:49 PM
This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.
HTML margin-left
Sep 04, 2024 pm 04:48 PM
Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.
HTML Table Layout
Sep 04, 2024 pm 04:54 PM
Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.
How do you parse and process HTML/XML in PHP?
Feb 07, 2025 am 11:57 AM
This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an
Moving Text in HTML
Sep 04, 2024 pm 04:45 PM
Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.
HTML Ordered List
Sep 04, 2024 pm 04:43 PM
Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively
HTML onclick Button
Sep 04, 2024 pm 04:49 PM
Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.
