Make scrolling sidebar stop at footer

问题:

I'm currently using the following:

http://jsfiddle.net/0mLzseby/469/

To make my sidebar follow down the page. I have quite a large footer though and I'd like the div to stop when it gets to the footer rather than to keep scrolling.

The code I currently have is:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

回答1:

You can check if you've scrolled down to the footer, then remove the stick class:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $("#sticky").height();

    if (window_top + div_height > footer_top)
        $('#sticky').removeClass('stick');    
    else if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

(you could combine the if to remove the duplicate .removeClass, here for demonstration)

However, with your css you get a nasty 'jump' around when you start scrolling - in your fiddle, the right content appears below #sticky then when you stick #sticky, the right content jumps to fill the gap. Using the code above, you'll get some race-conditions as the offset() moves when it fills/unfills the gap.

To fix this gap, just add a float:left to your #sticky css.

Updated fiddle: http://jsfiddle.net/0mLzseby/472/

---

I suspect you would like to go one step further and, when you get to the bottom, the div then starts to scroll with the page. You can do this by adjusting the 'position:fixed' top of .stick. Don't forget to reset it when not below the footer:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $("#sticky").height();

    var padding = 20;  // tweak here or get from margins etc

    if (window_top + div_height > footer_top - padding)
        $('#sticky').css({top: (window_top + div_height - footer_top + padding) * -1})
    else if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('#sticky').css({top: 0})
    } else {
        $('#sticky').removeClass('stick');
    }
}

The padding just makes it start scrolling in a more natural place - you can probably get this from other css attributes such as margin and padding of the other components.

Updated fiddle: http://jsfiddle.net/0mLzseby/473/

回答2:

You forgot to add class, if we are in the footer, and refrech the page, then, the sidebar won't show :

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $("#sticky").height();

    var padding = 20;  // tweak here or get from margins etc

    if (window_top + div_height > footer_top - padding) {
        $('#sticky').addClass('stick'); //////// here is to get fixed when we refrech page when we are in the footer
        $('#sticky').css({top: (window_top + div_height - footer_top + padding) * -1})
}     else if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('#sticky').css({top: 0})
    } else {
        $('#sticky').removeClass('stick');
    }
}

回答3:

You can check if you've scrolled down add the sticky class and when you've scroll on footer and header area it will be remove sticky class

function Stickyheaderfooterbar() {
        var windowTop = jQuery(window).scrollTop();
        var footerTop = jQuery(".footer").offset().top - 498;
        var stickydivTop = jQuery('#sticky-anchor').offset().top;
        var stickydivHeight = jQuery("#sticky").height();
        console.log('footer' + footerTop);
        console.log('stickydivTop' + stickydivTop);
        console.log('stickydivHeight' + stickydivHeight);
        console.log('windowTop' + windowTop);
        if (windowTop + stickydivHeight > footerTop)
            jQuery('#sticky').removeClass('stick');
        else if (windowTop > stickydivTop) {
            jQuery('#sticky').addClass('stick');
        } else {
            jQuery('#sticky').removeClass('stick');
        }
    }