javascript - jQuery 粘性边栏失败 : throws sidebar out of position

Question

大家好，我正在尝试制作一个粘性侧边栏，但它无法正常工作。任何帮助将非常感激。当你滚动时会发生什么，侧边栏被扔出他的左边位置。正如您在 fiddle 中看到的，同样的情况只发生在我使用图像的地方。这是一个Js fiddle . 有什么想法我做错了什么或我如何才能使这项工作成功吗？

提前致谢!

jQuery 代码

jQuery(function() { // document ready
        var sideBarTop = $('#sidebar').offset().top;
        var sideBarLeft = $('#sidebar').offset().left
        jQuery(window).scroll(function(){ // scroll event
            var windowTop = $(window).scrollTop(); 
            if(sideBarTop < windowTop) {
                $('#sidebar').css({position: 'fixed', top: 0, left: sideBarLeft});
            }
            else {
                $('#sidebar').css('position', 'static');
            }
        });

    });

Answer 1

此问题是由于您在 #sidebar 中设置的百分比值引起的。当它是静态的时，百分比值将基于其父元素，但是当您切换到 position:fixed 时，百分比值将基于 window/viewport，您可以看到规范在这里:http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme