【问题标题】：Bootstrap - maintaining column widths using position:fixed?Bootstrap - 使用位置维护列宽：固定？
【发布时间】：2015-10-04 17:33:41
【问题描述】：

我正在尝试在我的页面上创建一个“粘性”导航，一旦用户滚动到该元素，div 就会获得position:fixed;。该功能按预期工作，但是一旦添加了粘性类，应该粘在顶部的两列的宽度会发生变化。我尝试将 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

谢谢！

【问题讨论】：

您可以在页面加载时使用 Javascript 获取粘性元素的宽度，然后在添加固定定位后使用 JS 设置元素的宽度。不确定是否可以使用直接的 HTML/CSS 来完成。

标签： css twitter-bootstrap css-position

【解决方案1】：

在 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>

【讨论】：

【解决方案2】：

添加：

width:inherit;

致您的.sticky.stick

JSFiddle

就像 Nanang Mahdaen El-Agun 所说，固定位置将宽度与身体联系起来。对于width:inherit;，它将使用.container 类的宽度

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

【讨论】：

非常好的解决方案，不幸的是，由于浏览器与 width:inherit; 的兼容性，在这种情况下无法使用，但以后会牢记！

【解决方案3】：

您可以在容器周围添加一个 100% 宽度的包装器，并用那个棒代替。

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

更新的小提琴： https://jsfiddle.net/mileandra/omeegfc7/

【讨论】：

【解决方案4】：

我可以通过将您的容器设置为“container-fluid”然后添加宽度来使其工作：100%；到你的 .stick 类。

【讨论】：

【解决方案5】：

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

【讨论】：

谢谢，这个解决方案效果很好，并且符合我的想法。