jQuery滚动无无限循环

Question

我创建了一个包含内容和侧边栏的简单页面。 当用户滚动时，侧栏会下降。 当侧边栏较小时，它可以正常工作，但是当侧边栏较大时，它会无限下降。

我创建了一个演示页面以进行更好的解释。

在第一个示例中，边栏很小，因此可以正常使用（ http://jsbin.com/ojasuj/2/ ）

在第二个示例中，侧边栏很大，然后会无限下降（ http://jsbin.com/ojasuj/ ）。

我想在底部停止动画。 我正在使用此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'});
        }
    });
});

我尝试了几种方法，但无法解决此问题。 我尝试使用一些脚本，但是它们也没有用。 我希望有一个人可以帮助我。

Answer 1

您应该计算div的高度而不是文档的高度，因为当侧边栏大于内容时，它总是会添加“ height”。

因此，进行了一些小的更改：

HTML

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

这将使您的内容可以环绕p标签，并为内容ID提供高度。 您的侧边栏应远离此内容div，因为我们不希望它增加高度。

CSS

.clr {clear:both;}

使内容包装...

JS

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

希望你不要介意我为这个http://jsfiddle.net/tive/ByNde/使用了小提琴，因为jsbin对我来说有点慢。

Answer 2

我处理此问题的方法是使用一些JS。 我检查边栏的高度是否大于窗口高度。 如果是，请禁用侧边栏的“浮动”或“移动”，并使其与页面的其余部分一起滚动。

Answer 3

如果侧边栏不是非常小，那么像这样滚动它是没有意义的。 如果用户想查看侧边栏底部的内容怎么办？ 他们将不得不一直滚动到文档的底部。

但是，要使此工作正常进行，应检查主要内容<div>的高度，而不是整个文档的高度（因为每次滚动时，它都会变大）。

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

我会推荐@ Dutchie432的解决方案：

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