页面滚动时自动显示隐藏导航效果(jQuery)

原创 追梦de孩子 随笔 小例子 610阅读 2017-08-29 00:42:52 举报

介绍一个简单的导航效果,当用户向下滚动页面时自动隐藏导航,在用户向上滚动页面时自动显示导航。

支持IE9+,Chrome,Safari,FireFox…

自动显示隐藏导航这种交互出现已经有一段时间了,特别是在移动设备上。 这种UX模式背后的想法简单而有效:我们希望导航在我们需要的时候很方便的显示,当用户向下滚动页面时,导航会自动隐藏,为内容留出更多的空间。在用户向上滚动页面时,我们将他的行为理解为想要访问导航,所以我们把导航自动自动显示出来。

页面滚动时自动显示隐藏导航效果(jQuery)

创建HTML结构

HTML结构基本结构如下,header.cd-auto-hide-header元素包裹主导航元素nav.cd-primary-nav,页面主要内容元素 main.cd-main-content 。
html 代码

如果页面有一个子导航,那么在 header 元素上添加一个 nav.cd-secondary-nav。
html 代码

添加样式

我们使用 .cd-auto-hide-header 类来定义主要样式。默认情况下,让 header.cd-auto-hide-header 元素固定定位position: fixed;,top为0;当用户开始向下滚动页面时,用.is-hidden 类来隐藏可视区域上方的 header.cd-auto-hide-header 元素。

css 代码

事件处理

我们使用jQuery来监听 window 对象上的 scroll 事件。
javascript 代码

autoHideHeader() 函数根据用户向上或者向下滚动页面来处理 隐藏/显示 导航。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复