滾動浮動/滑動側欄問題

Question

我已經瀏覽了與我所面臨的內容相關的所有內容，但仍無法解決。

我正在嘗試做的是：

1. 當用戶向上/向下滾動頁面時，獲取側邊欄導航浮動。
2. 使邊欄居中停止，以便可以看到和單擊所有元素。

我得到的是：

1. 向下滾動（集中視圖）時，邊欄跟隨滾動就很好，但是當向上滾動時，如果頁面向上滾動得太快，則只顯示一半的邊欄。
2. 向下滾動頁面時，邊欄將無尾地將頁腳推向下方。
3. 從底部一直向上滾動頁面時，側欄不會鎖定回到其原始位置。 似乎有一點差距。

演示鏈接

這是腳本（改編自慷慨的喬登·米爾斯）：

<script type="text/javascript">
function animate_box() {  
var offset = -15; /* set this to the starting margin-top in the css */  
var element = document.getElementById('animate_box'); 

if(element) {  
    var top = Number(String(element.style.marginTop).substring(0,String(element.style.marginTop).indexOf('px')));

    try {  
        if(document.body.scrollTop > 500) {  
            var difference = (document.body.scrollTop + offset);
        } else if(document.documentElement.scrollTop > 0) {  
            var difference = (document.documentElement.scrollTop + offset);

        } else {  
            var difference = offset;  
        }  
    } catch(e) {  
        var difference = offset;  
    }  

    difference = difference - top;  

    if(difference > 200) {  
        element.style.marginTop = (top + Math.abs(Math.ceil(difference / 30))) + 'px';  
    } else if(difference < 190) {  
        element.style.marginTop = (top - Math.abs(Math.ceil(difference / 30))) + 'px';  
    }  
}  
}  
window.setInterval(animate_box, 50);
</script>

Answer 1

我建議使用另一種方法：

• 保存元素的起始位置（.offset（）。top）
• 滾動發生時：
• 如果窗口滾動偏移量（.scrollTop（））大於起始位置，則將側邊欄的位置更改為“固定”，並使用“頂部：0”
• 如果它位於起始位置以下，則將其更改回靜態（默認位置）。

像這樣：

$(function() {
    var backup_position_toolbar = $('#sidebar').offset().top;
    $(window).scroll(function() {
        if ( $('#sidebar').offset().top - $(window).scrollTop() < 0) $('#sidebar').addClass('fixed');
        if ( $(window).scrollTop() < backup_position_toolbar ) $('#sidebar').removeClass('fixed');
    });
});

請注意，我使用的“固定”類定義如下：.fixed {position：fixed; 最高：0; }

這使菜單更加可用。 如果要在某個點上阻止側欄，則可以添加更多的邏輯（即，當底部太近時）。 這樣，您無需設置數值（500、200等）。

但是，如果您不費吹灰之力就嘗試使用帶“綴”的引導程序（請看左側菜單，這就是您想要的） http://twitter.github.com/bootstrap/javascript.html#affix