jQuery滚动无无限循环

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.

Answer 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.

Answer 2

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.

Answer 3

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
    }
});