Javascript 为什么我的粘滞条不稳定？

我正在学习如何使用CSS和jQuery制作一个粘滞条

代码有点脏，因为为了使粘滞条工作，我需要一个长页面。 你可以看到代码

要重播这个问题，你需要照我说的做

1） 在最新的Firefox或Chrome浏览器中打开页面

2） 将浏览器的滚动条直接拖动到页面的末尾（不要停在中间）。您将看到粘条向下滑动，然后向上滑动，最后向下滑动

3） 随意拖动滚动条，问题就会消失

4） 然后刷新页面，在步骤2中执行相同的操作，您将再次看到问题

那真的不是我想要的粘条。我不希望第2步中的内容出现。

根据，而不是提供粘性条元素

可见性：隐藏，您必须使其
显示：无

注意：slideDown（）用于使用jQuery方法隐藏的元素，并在CSS中显示：无（但不显示：隐藏）

您可以查看完整编辑的代码，也可以在下面运行它以查看行为的差异


$（文档）.ready（函数（）
{
$（窗口）。滚动（函数（）
{
如果（$（窗口）.scrollTop（）>=60）
{
$（“.sticky_bar”）。向下滑动（“慢速”）
$（.sticky_bar”）.addClass（“sticky_bar_active”）；
}
其他的
{
$（“.sticky_bar”）.slideUp（“slow”）；
$（“.sticky\u nav”）.removeClass（“sticky\u bar\u active”）；
}
});
});
.sticky\u bar p{
显示：内联；
字体大小：13px；
右边填充：6px；
}
.粘巴{
文字装饰：无；
浮动：左；
}
.粘胶条{
显示：无；
位置：固定；
宽度：100%；
高度：65px；
左：0；
排名：0；
z指数：100；
边界顶部：0；
保证金：0；
边界：0；
填充：0；
背景色：#000000；
}
.粘滞条处于活动状态{
位置：固定；
宽度：100%；
高度：65px；
左：0；
排名：0；
z指数：100；
边界顶部：0；
}
.粘性文本{
颜色：#FFFFFF；
}
.包装纸{
宽度：1170px；
边际上限：0px；
右边距：自动；
边缘底部：0px；
左边距：自动；
}










你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好

非常感谢您的帮助。