Question

我有一个页面，分为3个部分。标题，侧边栏和内容部分。我试图让侧边栏滚动页面，直到它击中顶部，然后粘在那里直到我们向下滚动，此时它会粘在标题的底部。相关摘要：

var Sidebar = $("#Dock"), pos = Sidebar.offset();

$(window).scroll(function () {
    console.log('pre ' + Sidebar.hasClass('fixed') + ' | ' + $(this).scrollTop() + ' | ' + (pos.top + 10));
    if ($(this).scrollTop() > (pos.top + 10) && Sidebar.hasClass('notFixed')) {
        Sidebar.removeClass('notFixed');
        Sidebar.addClass('fixed');
    } else if ($(this).scrollTop() <= (pos.top + 10) && Sidebar.hasClass('fixed')) {
        Sidebar.removeClass('fixed');
        Sidebar.addClass('notFixed');
    }
    console.log('pos ' + Sidebar.hasClass('fixed') + ' | ' + $(this).scrollTop() + ' | ' + (pos.top + 10));
});

所以这是实际发生的事情：我们向下滚动，从浮动元素中删除notFixed类，给它fixed类，然后立即跳转到$(this).scrollTop() = 23。最后，任何构建的滚动事件都会解析，从我们的上一个位置移动，然后重置为23.在小提琴上，而不是23，它是0。

为什么会跳回来，我该怎么做才能解决它？

Answer 1

编辑：更新小提琴http://jsfiddle.net/WHLHW/4/

它不起作用的原因是因为height: 1000px上有#dock，身体没有高度。因为页面的高度为#dock，因此无法滚动#dock。

所以我做了以下工作，现在就可以了。

#dock {
    height:300px;
}

body {
    height: 1000px;
}

浮动，滚动元素正在改变滚动位置

1 个答案: