HTML5页面滚动时自动显示隐藏导航效果（jQuery）

　　今天扣丁学堂给大家介绍一个简单的导航效果，当用户向下滚动页面时自动隐藏导航，在用户向上滚动页面时自动显示导航。
　　支持IE9+，Chrome，Safari，FireFox等浏览器。
　　自动显示隐藏导航这种交互出现已经有一段时间了，特别是在移动设备上。这种UX模式背后的想法简单而有效：我们希望导航在我们需要的时候很方便的显示，当用户向下滚动页面时，导航会自动隐藏，为内容留出更多的空间。在用户向上滚动页面时，我们将他的行为理解为想要访问导航，所以我们把导航自动自动显示出来。这种交互现在比较常见，甚至在一些知名网站上都有应用。下面我们来看看简单的实现：
　　创建HTML结构
　　HTML结构基本结构如下，header.cd-auto-hide-header元素包裹主导航元素nav.cd-primary-nav，页面主要内容元素main.cd-main-content。
　　HTML代码:
　　
　　
　　
　　
　　Menu
　　
　　Theteam
　　OurServices
　　OurProjects
　　ContactUs
　　
　　
　　
　　
　　
　　如果页面有一个子导航，那么在header元素上添加一个nav.cd-secondary-nav。
　　HTML代码:
　　
　　
　　
　　
　　Menu
　　
　　
　　
　　
　　Intro
　　
　　
　　
　　
　　最后，有些页面可能主导航和子导航之间会放一张高大上的大尺寸banner图，那么在.cd-secondary-nav元素的下方插入.cd-hero元素。
　　HTML代码:
　　
　　
　　
　　
　　Menu
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　添加样式
　　我们使用.cd-auto-hide-header类来定义主要样式。默认情况下，让header.cd-auto-hide-header元素固定定位position:fixed;，top为0；当用户开始向下滚动页面时，用.is-hidden类来隐藏可视区域上方的header.cd-auto-hide-header元素。
　　CSS代码:
　　.cd-auto-hide-header{
　　position:fixed;
　　top:0;
　　left:0;
　　width:100%;
　　height:60px;
　　transition:transform.5s;
　　}
　　.cd-auto-hide-header.is-hidden{
　　transform:translateY(-100%);
　　}
　　Demo中各种情况的样式自己查看，不做具体解释了。
　　事件处理
　　我们使用jQuery来监听window对象上的scroll事件。
　　JavaScript代码:
　　varscrolling=false;
　　$(window).on(＂scroll＂,function(){
　　if(!scrolling){
　　scrolling=true;
　　(!window.requestAnimationFrame)
　　?setTimeout(autoHideHeader,250)
　　:requestAnimationFrame(autoHideHeader);
　　}
　　});
　　autoHideHeader()函数根据用户向上或者向下滚动页面来处理隐藏/显示导航。
　　以上就是关于扣丁学堂HTML5培训之页面滚动时自动显示隐藏导航效果（jQuery）的详细介绍，最后想要工作不累就要不断的提升自己的技能，请关注扣丁学堂官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5视频教程系统，通过千锋扣丁学堂金牌讲师在线录制的第一套自适应HTML5在线视频课程系统，让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：751662650。