Pitfall record when position:sticky encounters bootstrap floating layout-HTML Tutorial-php.cn

Pitfall record when position:sticky encounters bootstrap floating layout

青灯夜游

Release： 2018-10-10 17:41:13

forward

3390 people have browsed it

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>

Copy after login

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>

Copy after login

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:

$(&#39;.side&#39;).height($(&#39;.main&#39;).height())

Copy after login

because the left The content area has delayed loading of images, so this line of code needs to be executed continuously:

$(window).scroll(function() { 
 $(&#39;.side&#39;).height($(&#39;.main&#39;).height())

 // other code 
 // ...

})

Copy after login

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!