jQuery粘性側邊欄失敗：將側邊欄丟出位置

Question

大家好，我正在嘗試制作一個粘滯的側邊欄，但是我希望它不能正常工作。 任何幫助將非常感激。 滾動時發生的是，側邊欄被甩出了他的左側位置。 正如您在小提琴中看到的那樣，同樣的情況僅在我使用圖像的情況下發生。 這是一個小提琴 。 有什么想法我做錯了或如何做這項工作？

提前致謝！

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