页面上下滚动改变顶部导航的定位方式

 

 

最近碰到设计师的一个设计效果要求，其他网站也有实现：

state1:当网页向下滚动时，页面header栏消失，顶部nav往上靠；

state2:当网页向上滚动时，页面header栏出现，顶部nav顺着nav往下靠。

页面已经含有以下功能：

1、弹窗弹出时，弹窗层可滚动，但页面层不允许滚动。此时，页面中的body元素和html元素的overflow样式属性都被设置成了hidden；

 

页面结构如下：

头部

• 导航一
• 导航二

页面主体部分

页面底部

 

 

所碰到的问题是：scroll事件的监听太频繁（几乎移动一个像素就要执行一次监听事件），导致元素显示和隐藏时有闪动的问题，有时候甚至会导致某些元素来回切换。

在解决这样的问题的过程中，我的解决思路如下：

1、分别监听document的向下滚动和向上滚动事件

2、在监听的过程中，遇到弹窗弹出时不监听

3、在监听事件之外声明两个变量，分别为：permitMonitorScrollDown = true, permitMonitorScrollUp = true

4、

（1）、在监听document的向下滚动的流程中，在当前没有弹窗弹出的情况下，判断permitMonitorScrollDown的值是否为true，若为false，则直接return，跳出该监听流程；若为true，则将permitMonitorScrollDown设置为false，将状态切换到state1；设置定时器（js自带的setTimeout函数），在2000毫秒后恢复permitMonitorScrollDown为true。这种设置等价于每隔两秒允许监听一次向下滚动的事件。此处还隐藏有一点：当页面下滑，若切状态本身为state1时，不对状态做任何操作。

（2）、在监听document的向上滚动的流程中，在当前没有弹窗弹出的情况下，判断permitMonitorScrollUp的值是否为true，若为false，则直接return，跳出该监听流程；若为true，则将permitMonitorScrollUp设置为false，将状态切换到state2；设置定时器（js自带的setTimeout函数），在2000毫秒后恢复permitMonitorScrollUp为true。这种设置等价于每隔两秒允许监听一次向下滚动的事件。此处还隐藏有一点：当页面上滑，若切状态本身为state2时，不对状态做任何操作。

5、为了弥补上方两种情况发生的间歇期间页面滚动条已经触顶或者触底，所以需要用定时器单独处理这两种极端情况。

（1）、页面触顶（没有任何弹窗弹出且document的scrollTop为0），则状态必须切换到state1；

（2）、页面触底（没有任何弹窗弹出且document的scrollTop与$(window).height()的和刚好等于$(document).height()），则状态必须切换到state2;

 

我运用了jquery的filter函数，主要用于判断弹窗弹出时不监听滚动事件的情况（同时有一种等价的方式：当body的滚动条长度和滚动条本身的高度一样时，代表弹窗出现了。$("body")[0].scrollHeight==$（“body”）.height()），同时运用了程序中排他锁的概念。

 

以上是页面上下滚动改变顶部导航的定位方式的详细内容。更多信息请关注PHP中文网其他相关文章！