2

我已经浏览了这里所有与我所面临的问题相关的东西，但仍然无法修复它。

我正在尝试做的事情：

  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>
4

1 回答 1

0

我建议一种不同的方法：

  • 保存元素的起始位置 (.offset().top)
  • 当滚动发生时：
  • 如果窗口滚动偏移量 (.scrollTop()) 大于起始位置，则将侧边栏的位置更改为“固定”与“顶部：0”
  • 如果它低于起始位置，则将其更改回静态（默认位置）。

像这样的东西：

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

请注意，我使用定义如下的“固定”类： .fixed { position: fixed; 顶部：0；}

这使菜单更有用。如果您想在某个点阻止侧边栏，您可以添加更多逻辑（即当底部太靠近时）。通过这种方式，您无需设置数值（500、200 等）。

但是，如果您想要更多内容，请尝试使用“affix”进行引导（查看左侧菜单，这就是您想要的） http://twitter.github.com/bootstrap/javascript.html#affix

于 2012-11-12T09:38:35.877 回答