当 position:sticky 遇到 bootstrap 浮动布局时候的踩坑记录

今天要说的是 文章详情页 右侧的目录栏，当页面下滑的时候，它也会固定到页面顶部，之前是用 js 去监听 scroll 事件，然后根据位置进行判断，toggle fixed 的方案，出于一些原因，决定对它用 sticky 去重写。

几下就写完了，去掉滚动事件监听，然后将菜单元素 .post-nav 加上 position:sticky; top:0 样式，但是，不起效！

wtf! 百思不得其解，我开始搜索原因。在 so 搜到了 这个，说到可能是元素的父级元素有对 overflow 属性进行处理，比如加了什么 overflow:hidden 啥的，但是看了下，并没有这种情况。

然后我猜想会不会是 bootstrap 布局的问题（事实上确实有关系），写下 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>
    

但是没问题，突然想到网站用的 bootstrap 版本是 3.x，然后改成 3.3.7 的版本，这时候问题就出来了。

这时候问题就比较好定位了，4.x 用的是 flex 布局，而 3.x 还是 float 浮动布局，问题应该是出在这里了。

最终代码（参考 这个 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>

对应到开始的问题上，因为 menu 是属于 .col-md-3 元素的，所以右边的 .col-md-3 需要和左边的 .col-md-9 保持高度一致即可，加上这行代码：

$('.side').height($('.main').height())

因为左边的内容区域有图片的延迟加载，所以这行代码需要持续执行：

$(window).scroll(function() {
  $('.side').height($('.main').height()) // other code  // ...}
    )

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 HTML视频教程！

相关推荐：

php公益培训视频教程

以上就是当 position:sticky 遇到 bootstrap 浮动布局时候的踩坑记录的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！