滚动浮动/滑动侧边栏问题

Question

我已经浏览了与我所面临的内容有关的所有内容，但仍然无法修复。

我要做的事情：

1. 当用户向上/向下滚动时，请获取侧边栏导航。
2. 让侧边栏中心停止，以便可以看到和单击所有元素。

我得到的：

1. 侧栏在向下滚动时滚动滚动（集中视图），但是当滚动时，只有一半的侧边栏显示在页面滚动太快时。
2. 向下滚动页面时，侧边栏将页脚向下推下下方，而无需结束。
3. 当页面从底部一直向上滚动时，侧边栏将不会锁定到其原始位置。似乎有略有差距。

演示链接

这是脚本（从慷慨的Jordon Mears改装）：

<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（）。台面）
• 滚动发生时：
• 如果窗口滚动偏移量（.scrolltop（））超过起始位置，则将侧边栏的位置更改为"固定"，并用" top：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');
    });
});

请注意，我使用的"固定"类定义如下： 。固定的 { 位置：固定； 顶部：0; }

这使菜单更可用。如果要在某个点阻止侧边栏，则可以添加更多逻辑（即底部太近时）。这样，您就不需要设置数字值（500、200等）。

但是，如果您不愿意做更多的事情，请尝试使用" aprofix"进行bootstrap（看左菜单，是您想要的）http://twitter.github.com/bootstrap/javascript.html#affix