导航栏上拉显示下拉隐藏

一.需求说明

页面加载时导航栏悬浮在页面的上方,当滚动条向下滚动时导航栏隐藏,当滚动条向上滚动时导航栏显示

 

二.原理讲解

​ 页面打开时,先获取到页面的滚动条的初始高度(也可直接设为0),作用是初始化一个值,用于后面事件触发后进行判断。

​ 再获取导航栏的高度,作用是在初始位置进行下拉页面后,在什么时候触发导航栏隐藏。

​ 最后写滚动条触发函数

 

三.事件函数讲解

​ 事件触发后,首先判断事件发生后滚动条的高度与导航栏的高度。
当判断为True时,导航条隐藏;当判断为False时,导航条出现

​ 然后判断本次事件导航条的高度与上次事件导航条的高度。
当上次高度,低于本次高度,说明用户在看下面的内容,导航栏隐藏
当上次高度,高于本次高度,说明用户在看上面的内容,导航栏出现

四.源码




    
    Title
    




内容
//此处jquery路径要替换

 

 

 

 

你可能感兴趣的:(js,js,html)