jQuery Scroll without infinite loop

Question

I created a simple page with content and a sidebar. When the user scrolls, the sidebar goes down. When the sidebar is small it works right, but when the sidebar is large it gets down infinitely.

I created a demo page for better explanation.

In this first example, the sidebar is small so it works correct (http://jsbin.com/ojasuj/2/)

In this second example, the sidebar is large then it goes infinitely down (http://jsbin.com/ojasuj/).

I want to stop the animation at the bottom. I am using this javascript:

jQuery.noConflict();

jQuery(document).ready(function() {
    jQuery( document ).scroll( function() {
        if( jQuery(document).scrollTop() <= ( jQuery(document).height() - jQuery(window).height() ) ) {
            jQuery(".sidebar").stop().animate({"marginTop": ( jQuery(document).scrollTop() + 10 ) + "px"}, "slow" );
        } else {
            jQuery(".sidebar").css({'margin-bottom': '100px'});
        }
    });
});

I tried several ways but could not solve this problem. I tried to use some scripts, but they also did not work. I hope someone can help me.

Tim Vermaelen · Accepted Answer · 2012-01-04 16:29:00Z

1

You should calculate the div's height instead of the document's height since your sidebar will always add "height" when it's larger than your content.

Therefor a couple minor changes:

HTML

<div id="content">
    <p>all your text etc...</p>
    <div class="clr"></div>
</div>

This will enable your content to wrap around the p tags and give height to the content ID. Your sidebar should be kept out of this content div since we don't want it to add height.

CSS

.clr {clear:both;}

Makes the content wrap ...

JS

if( jQuery(document).scrollTop() <= ( jQuery("#content").height() - jQuery(window).height() - 150) )

Hope you don't mind I used fiddle for this one http://jsfiddle.net/tive/ByNde/ since jsbin was a bit slow for me.

answered Jan 4, 2012 at 16:29

Tim Vermaelen

7,0792 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dutchie432 · Accepted Answer · 2012-01-04 15:58:28Z

0

The way I handle this is with a bit of JS. I check to see if the height of the sidebar is larger than the window height. If it is, disable the 'floating' or 'moving' of the sidebar and allow it to scroll with the rest of the page.

answered Jan 4, 2012 at 15:58

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

Comments

Ansel Santosa · Accepted Answer · 2012-01-04 16:04:36Z

0

If you have a sidebar that is not very small it doesn't make sense to scroll it like this anyway. What if a user wants to see what is at the bottom of the sidebar? They would have to scroll all the way to the bottom of the document.

However to get this working, you should be checking against the height of your main content <div> and not the height of the entire document (because that gets larger every time you scroll).

if ($(document).scrollTop() <= ( $('#content').height() - $(window).height()) {
    $('.sidebar').stop().animate({'marginTop': ($(document).scrollTop() + 10) + 'px'}, 'slow');
}

I would recommend @Dutchie432's solution:

$(document).ready(function() {
    if ($('.sidebar').height() < $(window).height()) {
        // init scrolling scrip here
    }
});

answered Jan 4, 2012 at 16:04

Ansel Santosa

8,4841 gold badge31 silver badges39 bronze badges

2 Comments

André Golvea Over a year ago

Thanks for you help. I'd like to when I arrived at the end of the page, scroll "caught." Then the user could read what's on the bottom of the sitebar. Look: link

Ansel Santosa Over a year ago

Here you go, the bottom alignment is a bit off but you should be able to tweak that.

Collectives™ on Stack Overflow

jQuery Scroll without infinite loop

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related