Bootstrap - 使用 position:fixed 保持列宽？

Question

我正在尝试在我的页面上创建一个 "sticky" 导航，一旦用户滚动到该元素，div 就会变成 position:fixed;。该功能按预期工作，但一旦添加粘性 class，本应粘在顶部的两列的宽度就会发生变化。我尝试将 width:100%; 添加到粘性元素的 CSS，但随后该元素扩展到容器之外。

添加 position:fixed; 后，如何确保列宽保持在应有的位置？

HMTL:

<div class="container">
    <div class="padding"></div>
    <div class="anchor"></div>
    <div class="row sticky">
        <div class="col-sm-6">
            Testing
        </div>
        <div class="col-sm-6">
            Testing
        </div>
    </div>
    <div class="padding2"></div>
</div>

CSS:

.padding {
    height:250px;
}
.padding2 {
    height:1000px;
}
.sticky {
    background:#000;
    height:50px;
    line-height:50px;
    color:#fff;
    font-weight:bold;
}
    .sticky.stick {
        position:fixed;
        top:0;
        z-index:10000;
    }

JS:

function stickyDiv() {
    var top = $(window).scrollTop();
    var divTop = $('.anchor').offset().top;
    if (top > divTop) {
        $('.sticky').addClass('stick');
    } else {
        $('.sticky').removeClass('stick');
    }
}

$(window).scroll(function(){ 
    stickyDiv();
});
stickyDiv();

JSFiddle

谢谢！

Answer 1

固定位置是相对于body的，所以会从body宽度算起100%宽度。如果使用javascript没问题，可以通过获取容器宽度来设置粘性宽度。检查 Updated Fiddle

Answer 2

我可以通过将容器设置为 "container-fluid" 然后添加 width: 100%; 来让它工作到你的 .stick class.

Answer 3

添加：

width:inherit;

给你的.sticky.stick

JSFiddle

如 Nanang Mahdaen El-Agun 所说，固定位置将宽度与 body 相关联。使用 width:inherit; 它将使用 .container class

的宽度

参考：Set width of a "Position: fixed" div relative to parent div

Answer 4

您可以在容器周围添加一个 100% 宽度的包装纸，然后用它来代替。

<div class="wrap">
    <div class="container sticky">
        <div class="row">
        ...
        </div>
    </div>
</div>

已更新 fiddle： https://jsfiddle.net/mileandra/omeegfc7/

Answer 5

在 Bootstrap 4 中，在 div 行周围添加一个 <div class="sticky-top">...</div> 就足够了：https://getbootstrap.com/docs/4.4/utilities/position/

<div class="sticky-top">
  <div class="row">
    <div class="col-sm-6">
      Testing
    </div>
    <div class="col-sm-6">
      Testing
    </div>
  </div>
</div>

Bootstrap - 使用 position:fixed 保持列宽？

Bootstrap - maintaining column widths using position:fixed?

css

css-position

twitter-bootstrap

JSFiddle