Javascript 浮动、滚动元素正在更改滚动位置

我有一个页面，分为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));
});

var Sidebar=$（“#Dock”），pos=Sidebar.offset（）；
$（窗口）。滚动（函数（）{
console.log（'pre'+Sidebar.hasClass（'fixed'）+'|'+$（this.scrollTop（）+'|'+（pos.top+10））；
if（$（this.scrollTop（）>（pos.top+10）和&Sidebar.hasClass（'notFixed'））{
侧边栏.removeClass（'notFixed'）；
addClass（'fixed'）；
}else if（$（this）.scrollTop（）编辑：更新的小提琴

它不起作用的原因是，您在
#dock
上有
高度：1000px
，而正文没有高度。因此，由于页面是
#dock
的高度，您无法滚动通过
#dock

所以我做了下面的工作，现在它起作用了

#dock {
    height:300px;
}

body {
    height: 1000px;
}

事实上，情况似乎是这样的。将示例文本放到另一个div中也会产生预期的行为。发生的情况是我的控制台沿底部打开，人为地缩小页面并在浏览器中创建可滚动的空间。谢谢。