滚动浮动/滑动侧栏问题

Question

I've looked through all stuff in here related to what I'm facing, but still can't get it fixed.

What I'm trying to do:

1. Get a sidebar navigation to float as the user scrolls up/down the page.
2. To have the sidebar centrally stopping so that all elements can be seen and clicked.

What I'm getting:

1. Sidebar follows scrolling just fine when scrolling down (centralised view), but when scrolling up, only half of the sidebar is displayed when the page is scrolled up too fast.
2. When scrolling down the page, the sidebar will push the footer further below without end.
3. The sidebar will not lock back into its original position when the page is scrolled all the way up from the bottom. There seems to be a slight gap.

Demo Link

Here is the script (modded from the generous 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

I suggest a different approach:

• save the starting position of the element (.offset().top)
• when scroll happens:
• if the window scroll offset (.scrollTop()) is more than the starting position, then change the position of the sidebar to "fixed" with "top: 0"
• if it goes under the starting position change it back to static (default position).

Something like this:

$(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');
    });
});

Note that I use a "fixed" class defined as follows: .fixed { position: fixed; top: 0; }

This makes the menu more usable. If you want to block the sidebar at a certain point you can add a little more logic (ie when bottom is too close). In this way you don't need to set numeric values (500, 200 etc).

HOWEVER if you want something more with no effort try bootstrap with "affix" (look at the left menu, is what you want) http://twitter.github.com/bootstrap/javascript.html#affix