滚动页面边缘的 jQuery 动画答案

【问题标题】：jQuery animation scrolling off the edge of a page滚动页面边缘的 jQuery 动画
【发布时间】：2010-11-24 10:47:30
【问题描述】：

我有一个侧边栏，即使滚动条向下移动以查看更多内容，我也希望它在窗格右侧被冻结。我放弃了它的完美修复，并通过使用 jQuery 与页面一起向下滚动的侧边栏来处理它。目前这就是我的处理方式。

<script type="text/javascript">
$(window).scroll(function() {
    $('#sidebarPage1').animate(
        { top: $(window).scrollTop() + 'px' }, 
        { queue: false, duration: 500, easing: 'easeInOutSine' }
    );
});
</script>

我的页面上有一个 100% 宽的页眉和页脚，所以侧边栏的顶部从顶部偏移了大约 150 像素，当用户完全滚动到底部时有小的视口时，该栏最终会在我的下方页脚，或者如果它是一个完全在屏幕之外的非常小的视口。

是否有一种简单的方法来计算设置顶部的位置，让它在距视口底部大约 200 像素处停止，这样它就不会在页脚中崩溃？

更新来自 Joel 的回答：

<script type="text/javascript">
    $(window).scroll(function() {            
        var dynamicSidebarHeight = $('#sidebar').height();            
        var fixedFooterOffset = 168;
        var scrollTo = $(window).scrollTop()
        var calculatedMaxTop = $('#footer').offset().top - 
                    dynamicSidebarHeight - fixedFooterOffset;

        if (scrollTo > calculatedMaxTop) {
            scrollTo = calculatedMaxTop;
        }
        $('#sidebarPage1')
            .animate(
                { top: scrollTo + 'px' },
                { queue: false, duration: 500, easing: 'easeInOutSine' }
        );
    });
</script>

固定 .Height() 函数

【问题讨论】：

标签： jquery css animation

【解决方案1】：

也许使用页脚的顶部？

$(window).scroll(function() {
    var scrollTo = $(window).scrollTop()
    if (scrollTo > ($("#footer").offset().top - 200))
        scrollTo = $("#footer").offset().top - 200;

    $('#sidebarPage1').animate(
        { top: scrollTo + 'px' }, 
        { queue: false, duration: 500, easing: 'easeInOutSine' }
    );
});

未经测试。您可能需要执行一些parseInt 才能使其正常工作。

【讨论】：

谢谢乔尔，你的回答几乎给了我工作所需的一切！ Offset() 函数确实是整个问题的意义所在，我知道我需要什么，但不知道如何到达那里。唯一倒退的是您需要从顶部减去值。
是的，你的权利。我得到了正确的比较，但忘记了加法/减法。立即编辑。

【解决方案2】：

我写了一篇关于如何完善这种效果的博客文章，并更深入地介绍了如何创建这个解决方案：Using jQuery to create a scrolling sidebar。

【讨论】：