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

jQuery Scroll没有无限循环

3 个答案: