Question

我目前正在使用此代码：

$(document).ready(function () {  
    var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
    $(window).scroll(function (event) {
        // what the y position of the scroll is
        var y = $(this).scrollTop();

        // whether that's below the form
        if (y >= top) {
            // if so, ad the fixed class
            $('#sidebar').addClass('fixed');
        } else {
            // otherwise remove it
            $('#sidebar').removeClass('fixed');
        }
    });
});

当我在特定点之后向下滚动时，它会在我的侧边栏上设置fixed。我希望我的侧边栏在到达一个点后停止fixed，这可能是整个页面底部的200px。我怎么能这样做？

Answer 1

您只需在事件处理程序中添加一些检查和计算。这里有一些修改后的代码可以做你想要的：

$(function() {
    var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
    var footTop = $('#background2').offset().top - parseFloat($('#background2').css('marginTop').replace(/auto/, 0));
    var maxY = footTop - $('#sidebar').outerHeight();
    $(window).scroll(function(evt) {
        var y = $(this).scrollTop();
        if (y > top) {
            if (y < maxY) {
                $('#sidebar').addClass('fixed').removeAttr('style');
            } else {
                $('#sidebar').removeClass('fixed').css({
                    position: 'absolute',
                    top: (maxY - top) + 'px'
                });
            }
        } else {
            $('#sidebar').removeClass('fixed');
        }
    });
});

您可以看到它生效at this jsFiddle。

Answer 2

可能不完全是你所追求的，但你总是可以尝试以下方法：

http://imakewebthings.github.com/jquery-waypoints/ （滚动到元素时可以触发事件）

或

http://plugins.jquery.com/project/whenScrollBottom （火灾事件一旦滚动到底部，即当您滚动到页面底部时，Twitter或Facebook加载更多Feed项目）

固定侧边栏直到div

2 个答案: