Home >Web Front-end >HTML Tutorial >Pitfall record when position:sticky encounters bootstrap floating layout

Pitfall record when position:sticky encounters bootstrap floating layout

青灯夜游forward: 2018-10-10 17:41:133561browse

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:

$(&#39;.side&#39;).height($(&#39;.main&#39;).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() { 
 $(&#39;.side&#39;).height($(&#39;.main&#39;).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!

php css bootstrap html Float JS 事件 position overflow flex issue

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：A brief discussion on name, value in input and for in labelNext article：A brief discussion on name, value in input and for in label

See more

Pitfall record when position:sticky encounters bootstrap floating layout

Related articles