Question

我有一个侧边栏，我希望它表现得像在窗格右侧冻结，即使滚动条向下移动以查看更多内容。我放弃它完全修复并通过侧边栏使用jQuery向下滚动页面来处理它。目前我正在处理这个问题。

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

我的页面上有一个100％宽的页眉和页脚，所以侧边栏的顶部偏离顶部约150px，当用户有小视口时，当它们完全滚动到底部时，栏将最终落在我的下方页脚或者它是一个非常小的视图端口完全在屏幕外。

是否有一种简单的方法可以计算出顶部的位置，让它从视口底部停止大约200px，这样它就不会通过页脚崩溃？

来自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（）函数

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

Answer 2

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

jQuery动画滚动页面边缘

2 个答案: