Question

Im using this script:

<script>
    $(function() {
        var offset = $("#menu_border").offset();
        var topPadding = 20;
        $(window).scroll(function() {
            if ($(window).scrollTop() > offset.top) {
                $("#menu_border").stop().animate({
                    marginTop: $(window).scrollTop() - offset.top + topPadding
                });
            } else {
                $("#menu_border").stop().animate({
                    marginTop: 0
                });
            };
        });
    });
    </script>

It makes my $menu_border following the window as the user scrolls. The problem is, I have a div “under” this one and when the user (with a screen of lesser resolution then 1080) scrolls to the bottom of the page, this script just keeps on pushing #menu_border down, making the page longer and longer.

So the question is; Is there a simple way to make it stop at a certain point? The best thing would be inside a container (#container_div in this case).

Hope I made myself understood.

Best regards!

Answer 1

You need to stop adding to the margin the moment value of $(window).scrollTop() combined with height of the #menu_border exceeds height of the body.

This one is of top of my head, and I didn’t try it live, but altering your first condition to be:

if ($(window).scrollTop() > offset.top && 
    ($(window).scrollTop() + $('#menu_border').outerHeight() <=  $('BODY').height()) {

instead of

if ($(window).scrollTop() > offset.top)

should do the trick. Depending on whether you have padding on #menu_border you’re maybe want to use $('BODY').outerHeigh() instead of $('BODY').height().

Let me know if you did it.