JSFiddle

Question

我正在努力创造一个＆＃34;粘性＆＃34;在我的页面上导航，一旦用户滚动到元素，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

谢谢！

Answer 1

固定位置相对于身体，因此它将从身体宽度计算100%宽度。如果使用javascript是好的，您可以通过获取容器宽度来设置粘性宽度。查看Updated Fiddle

Answer 2

添加：

width:inherit;

到.sticky.stick

JSFiddle

像Nanang Mahdaen El-Agun所说，固定位置将宽度与身体相关联。使用width:inherit;时，它将使用.container类

的宽度

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

Answer 3

我能够通过将容器设置为＆＃34; container-fluid＆＃34;来实现它的工作。然后加宽：100％;你的.stick课程。

Answer 4

在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保持列宽？

JSFiddle

4 个答案: