Javascript 页眉需要在页面滚动上上下滑动

我在页面顶部有一个div，其中包含一些简单的联系信息和社交媒体链接，我将它们隐藏在向下滚动的页面上，当你到达页面顶部时，它们会重新出现。我所希望的是，这种转变能够更顺利地进行。上下滑动会很好，但我没有成功地使它工作。以下是我现在拥有的：

（函数（$）{
“严格使用”；
函数mainNavbar（）{
如果（$（'#主导航栏'）。长度）{
$（“#主导航栏”）。粘贴({
偏移量：{
前10名，
底部：函数（）{
返回（this.bottom=$（'.footer'）.outerHeight（true））
}
}
});
}
}
mainNavbar（）；
})

.top\u header\u区域{
背景:#333333；
}
.顶部标题区域。顶部导航李a{
字体：400 14px/50px“Roboto”，无衬线；
颜色：#fff；
填充：0；
左侧填充：30px；
}
.顶部标题区域。顶部导航李a i{
颜色：#cc0033；
字号：18px；
右边填充：10px；
}
.顶部标题区域。顶部导航李a：悬停，
.顶部标题区域。顶部导航李a：焦点{
背景色：透明；
颜色：#cc0033；
}
顶部标题区域顶部导航李：第一个孩子a{
填充：0；
}
.顶部标题区域.社交导航{
保证金：0；
填充顶部：12px；
}
.顶部标题区域。社会导航李a{
字体大小：14px；
颜色：#fff；
填充：0；
文本对齐：居中；
高度：24px；
宽度：24px；
边界半径：50%；
左边距：10px；
}
.顶部标题区域.社会导航李a i{
线高：24px；
}
.顶部标题区域.社交导航李a:悬停，
.顶部标题区域.社交导航a:焦点{
背景：#cc0033；
颜色：#333333；
}

这里有一些示例文本

滚动我

$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>20）{
$（'#top'）.addClass（'slide'）；
}
否则{
$（'#top'）。删除类（'slide'）；
}
});
.top\u header\u区域{
背景:#333333；
}
.顶部标题区域。顶部导航李a{
字体：400 14px/50px“Roboto”，无衬线；
颜色：#fff；
填充：0；
左侧填充：30px；
}
.顶部标题区域。顶部导航李a i{
颜色：#cc0033；
字号：18px；
右边填充：10px；
}
.顶部标题区域。顶部导航李a：悬停，
.顶部标题区域。顶部导航李a：焦点{
背景色：透明；
颜色：#cc0033；
}
顶部标题区域顶部导航李：第一个孩子a{
填充：0；
}
.顶部标题区域.社交导航{
保证金：0；
填充顶部：12px；
}
.顶部标题区域。社会导航李a{
字体大小：14px；
颜色：#fff；
填充：0；
文本对齐：居中；
高度：24px；
宽度：24px；
边界半径：50%；
左边距：10px；
}
.顶部标题区域.社会导航李a i{
线高：24px；
}
.顶部标题区域.社交导航李a:悬停，
.顶部标题区域.社交导航a:焦点{
背景：#cc0033；
颜色：#333333；
}
p{
位置：绝对位置；
最高：20%；
左：50%；}
梅因先生{
宽度：100%；
位置：相对位置；
高度：2000px；}
#上滑梯{
转换：translateY（-100%）；
不透明度：0；
}
#顶{
过渡：所有2；
}









滚动我

调用的
mainNavbar（）
在哪里？嗨@Logan！你能分享一个有效的例子吗？您共享的代码片段实际上并不执行您所说的代码的当前行为。正因为如此，要量化
发生得更顺利
，就很难不看到它现在有多顺利。@RoryMcCrossan mainNavbar（）刚刚在我的JS结尾被调用。欢迎使用堆栈溢出！请花点时间描述问题是什么，以及此解决方案有帮助的原因。记住，我们来这里是为了教育人们，而不仅仅是为他们编写代码。这对我来说很有效，用这个函数替换mainNavbar，我得到了我想要的效果。谢谢你，阿德尔！