当position:fixed由jQuery添加时，Floated div在FireFox中向右跳转，在其他浏览器中运行

Question

我基本上有和这个问题相同的问题，只是删除固定宽度只会让我的问题变得更糟。这个问题可以在这个页面上看到。奇怪的是，我在博客页面上使用了完全相同的代码，而且在任何浏览器上都没有问题。

如果人们愿意，我可以试着发布一个小提琴，但很难重现确切的问题。

这是我的JS:

if ($('.sticky-sidebar').length) {
    var sideBarTop = $('.sticky-sidebar').offset().top;
    stickySidebar = function() {
        if ($(window).width() >= 768) {
            $('.sticky-sidebar').css({
                width: 0.25*($('#container').width())
            });
            if ($(window).scrollTop() >= (sideBarTop - $('#header').outerHeight(true))) {
                $('.sticky-sidebar').css({
                    position: 'fixed',
                    top: $('#header').outerHeight(true)
                });
            } else {
                $('.sticky-sidebar').css({
                    position: '',
                    top: ''
                });
            }
        } else {
            $('.sticky-sidebar').css({
                width: $('#container').width()
            });
        }
    };
    stickySidebar();
    $(window).scroll(stickySidebar);
    $(window).on('resize', stickySidebar);
}

Answer 1

尝试以下操作。。

if ($('.sticky-sidebar').length) {
    var sideBarTop = $('.sticky-sidebar').offset().top;
    stickySidebar = function() {
        if ($(window).width() >= 768) {
            $('.sticky-sidebar').css({
                width: 0.25*($('#container').width())
            });
            if ($(window).scrollTop() >= (sideBarTop - $('#header').outerHeight(true))) {
                $('.sticky-sidebar').css({
                    position: 'fixed',
                    top: $('#header').outerHeight(true),
                    left : $("#content").offset().left
                });
            } else {
                $('.sticky-sidebar').css({
                    position: '',
                    top: ''
                });
            }
        } else {
            $('.sticky-sidebar').css({
                width: $('#container').width()
            });
        }
    };
    stickySidebar();
    $(window).scroll(stickySidebar);
    $(window).on('resize', stickySidebar);
}

添加到左侧的粘性标头