javascript - Bootstrap 将 div 元素固定在顶部并防止调整大小

Question

我想通过滚动在顶部固定一个 div 元素。我用以下代码实现了这一点:

Javascript:

$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
    var top = $('#betslip').offset().top - parseFloat($('#betslip').css('margin-top').replace(/auto/, 0));
    $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    // whether that's below the form
    if (y >= top) {
        // if so, ad the fixed class
        $('#betslip').addClass('fixed');
    } else {
        // otherwise remove it
        $('#betslip').removeClass('fixed');
    }
    });
}  

CSS:

#betslip.fixed {
    position: fixed;
    top: 0;
}

HTML:

<div class="col-md-12" id="betslip">
...
</div>

问题是，滚动时 div 元素变大了。我该如何解决/防止这种情况？

这是滚动前后的截图:

Answer 1

通过添加 position: fixed; 到 #betslip 它将忽略容器的宽度。尝试将 width: inherit; 添加到 #betslip.fixed