jQuery 动画从页面边缘滚动

Question

我有一个侧边栏，即使滚动条向下移动以查看更多内容，我也希望它的行为就像卡住在 Pane 的右侧一样。我放弃了对其进行完美修复，并通过使用 jQuery 使侧边栏随页面向下滚动来处理它。目前我就是这样处理的。

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

我的页面上有一个 100% 宽的页眉和页脚，因此侧边栏的顶部从顶部偏移了大约 150px，当用户的视口(viewport)很小时，当他们完全滚动到底部时，侧边栏最终会进入我的下方页脚或者如果它是一个完全超出屏幕的非常小的视口(viewport)。

是否有一种简单的方法来计算顶部设置的位置，让它停在距离视口(viewport)底部大约 200 像素的位置，这样它就不会穿过页脚？

更新了乔尔的回答:

<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() 函数

Answer 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 才能使其正常工作。