javascript - 滚动 float /滑动侧边栏问题

Question

我已经查看了这里与我所面临的问题相关的所有内容，但仍然无法解决问题。

我正在尝试做的事情:

1. 让边栏导航在用户向上/向下滚动页面时 float 。
2. 让侧边栏居中停止，以便可以看到和点击所有元素。

我得到的:

1. 侧边栏在向下滚动时很好地跟随滚动(集中 View )，但在向上滚动时，如果页面向上滚动太快，则只显示一半的侧边栏。
2. 向下滚动页面时，侧边栏会将页脚推到更下方，没有尽头。
3. 当页面从底部向上滚动时，侧边栏不会锁定回原来的位置。似乎有一点差距。

Demo Link

这是脚本(根据慷慨的 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().top)
• 滚动发生时:
• 如果窗口滚动偏移量(.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 等)。

但是如果你想要更多的东西不费吹灰之力试试bootstrap with "affix"(看看左边的菜单，就是你想要的) http://twitter.github.com/bootstrap/javascript.html#affix