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