首先写一个简易的顶部导航栏，并写上一些简易的CSS样式来装饰一下。如下图
注意，CSS里我在ul标签上写了固定定位且top赋值为-50px，因为ul标签的高度是50px而我又写了固定定位这时候把top赋值为-50px的话就会刚刚好把ul标签带到屏幕上面，也就会看起来把ul标签隐藏了
HTML部分下面有个div我是给了1200px的高度，因为这是一个简易的案例，所以我用了个盒子把页面顶了起来，这样子页面上就会有滚动条供我们使用。
下面是js部分了，首先给文档绑定滚动条滚动事件并使用事件对象，然后在事件对象里找到滚动条滚动时离顶部的距离，使用滚动条离顶部的距离做if判断，如果这个距离超过了所设的目标值那么将顶部的导航栏给显示。具体代码如下图。
最后我们看一下效果如何
