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

时间:2021-02-20 18:00:20

导读:页面滚动时自动显示隐藏导航效果(jQuery)约有567个文字,预计阅读时间1分钟以上。内容由生活百科整理编辑,关键词是jq判断是否隐藏,页面滚动时自动显示隐藏导航效果(jQuery);主要讲解的内容是今和大家分享jQuery的知识:jQuery的效果,jQuery效果包含有,jQuery显示与隐藏、淡入淡出、滑动、回调...的相关信息,具体详情请阅读下文。

jq判断是否隐藏 页面滚动时自动显示隐藏导航效果(jQuery)

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

支持IE9+,Chrome,Safari,FireFox…

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

先来看看演示Demo:

简单的导航主导航 + 子导航主导航 + 大Banner + 子导航这种交互现在比较常见,甚至在一些知名网站上都有应用。下面我们来看看简单的实现:

创建HTML结构

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

jq判断是否隐藏 页面滚动时自动显示隐藏导航效果(jQuery)

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

jq判断是否隐藏 页面滚动时自动显示隐藏导航效果(jQuery)

最后,有些页面可能主导航和子导航之间会放一张高大上的大尺寸 banner 图, 那么在 .cd-secondary-nav 元素的下方插入 .cd-hero 元素。

jq判断是否隐藏 页面滚动时自动显示隐藏导航效果(jQuery)

添加样式

我们使用 .cd-auto-hide-header类来定义主要样式。默认情况下,让

header.cd-auto-hide-header元素固定定位position: fixed;,top为0;当用户开始向下滚

动页面时,用.is-hidden类来隐藏可视区域上方的 header.cd-auto-hide-header元素。

jq判断是否隐藏 页面滚动时自动显示隐藏导航效果(jQuery)

Demo 中各种情况的样式自己查看,不做具体解释了。

事件处理

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

jq判断是否隐藏 页面滚动时自动显示隐藏导航效果(jQuery)

演示地址:http://css88.com/demo/auto-hiding-navigation/nav-simple.html

关注小编私信“学习”免费提供学习资料

以上就是由生活百科jq判断是否隐藏整理的“页面滚动时自动显示隐藏导航效果(jQuery)”的相关信息了。除特别注明外,本站所有内容均为生活百科整理排版。更多精彩内容可持续关注生活百科频道!转载请注明出处:页面滚动时自动显示隐藏导航效果(jQuery):http://www.zenmele.net/article/31494.html

   

相关文章

好啊来啊 好运来临 好啊好啊 旱地忽律 哈弗H9 富时罗素 弗吉尼亚 福田奥铃 佛罗里达 凤凰资讯 凤凰直播 凤凰新闻 凤凰卫视 风云岁月 俄勒冈州 俄亥俄州

所有文章未经授权禁止转载、摘编、复制或建立镜像,如有违反,追究法律责任。举报邮箱:81156344@qq.com

Copyright © 2019-2030 生活百科网 版权所有

最新更新| 网站地图