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的高度，而不是文档的高度，因为你的侧边栏总是加上“高度”时，它比你的内容大。

为此几个细微的变化：

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