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

Question

我试图在我的页面上创建一个"粘性"导航,position:fixed;一旦用户滚动到元素,div就会生成.功能按预期工作,但添加粘性类后,应该粘贴到顶部的两列的宽度会发生变化.我尝试添加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没问题，您可以通过获取容器宽度来设置粘性宽度。检查更新的小提琴