以下是 jQuery滚动自动隐藏导航菜单代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery滚动自动隐藏导航菜单代码</title>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
</head>
<body>
<header class="cd-auto-hide-header">
<div class="logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div>
<nav class="cd-primary-nav">
<a href="#cd-navigation" class="nav-trigger">
<span>
<em aria-hidden="true"></em>
Menu
</span>
</a> <!-- .nav-trigger -->
<ul id="cd-navigation">
<li><a href="#0">The team</a></li>
<li><a href="#0">Our Products</a></li>
<li><a href="#0">Our Services</a></li>
<li><a href="#0">Shopping tools</a></li>
<li><a href="#0">Contact Us</a></li>
</ul>
</nav> <!-- .cd-primary-nav -->
</header> <!-- .cd-auto-hide-header -->
<main class="cd-main-content">
<div>
<header class="zzsc-header">
<div class="zzsc-demo center">
<a href="index.html" class="current">nav-simple</a>
<a href="index2.html">nav-subnav</a>
<a href="index3.html">nav-hero-subnav</a>
</div>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores! Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste. Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur harum asperiores culpa nostrum omnis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, quos, voluptate, sunt, in suscipit quibusdam quis dignissimos eligendi repellendus ipsam exercitationem adipisci nostrum fugit accusamus quae cum nisi accusantium eaque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores! Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste. Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur harum asperiores culpa nostrum omnis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores! Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste. Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur harum asperiores culpa nostrum omnis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores! Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste. Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur harum asperiores culpa nostrum omnis.
</p>
</div>
</main> <!-- .cd-main-content -->
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
</head>
<body>
<header class="cd-auto-hide-header">
<div class="logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div>
<nav class="cd-primary-nav">
<a href="#cd-navigation" class="nav-trigger">
<span>
<em aria-hidden="true"></em>
Menu
</span>
</a> <!-- .nav-trigger -->
<ul id="cd-navigation">
<li><a href="#0">The team</a></li>
<li><a href="#0">Our Products</a></li>
<li><a href="#0">Our Services</a></li>
<li><a href="#0">Shopping tools</a></li>
<li><a href="#0">Contact Us</a></li>
</ul>
</nav> <!-- .cd-primary-nav -->
<nav class="cd-secondary-nav">
<ul>
<li><a class="active" href="#0">Intro</a></li>
<li><a href="#0">Features</a></li>
<li><a href="#0">Photos</a></li>
<li><a href="#0">Videos</a></li>
<li><a href="#0">Specs</a></li>
<li><a href="#0">Support</a></li>
<li><a href="#0">Compare</a></li>
<li><a href="#0">Buy</a></li>
</ul>
</nav> <!-- .cd-secondary-nav -->
</header> <!-- .cd-auto-hide-header -->
<main class="cd-main-content sub-nav">
<div>
<header class="zzsc-header">
<div class="zzsc-demo center">
<a href="index.html">nav-simple</a>
<a href="index2.html" class="current">nav-subnav</a>
<a href="index3.html">nav-hero-subnav</a>
</div>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores! Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste. Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur harum asperiores culpa nostrum omnis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores! Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste. Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur harum asperiores culpa nostrum omnis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, quos, voluptate, sunt, in suscipit quibusdam quis dignissimos eligendi repellendus ipsam exercitationem adipisci nostrum fugit accusamus quae cum nisi accusantium eaque.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores! Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste. Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur harum asperiores culpa nostrum omnis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores! Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste. Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur harum asperiores culpa nostrum omnis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores! Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste. Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur harum asperiores culpa nostrum omnis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores! Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste. Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur harum asperiores culpa nostrum omnis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores! Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste. Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur harum asperiores culpa nostrum omnis.
</p>
</div>
</main> <!-- .cd-main-content -->
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
JS代码(main.js):
jQuery(document).ready(function($){
var mainHeader = $('.cd-auto-hide-header'),secondaryNavigation = $('.cd-secondary-nav'),//this applies only if secondary nav is below intro sectionbelowNavHeroContent = $('.sub-nav-hero'),headerHeight = mainHeader.height();
//set scrolling variablesvar scrolling = false,previousTop = 0,currentTop = 0,scrollDelta = 10,scrollOffset = 150;
mainHeader.on('click','.nav-trigger',function(event){
// open primary navigation on mobileevent.preventDefault();
mainHeader.toggleClass('nav-open');
}
);
$(window).on('scroll',function(){
if( !scrolling ){
scrolling = true;
(!window.requestAnimationFrame)? setTimeout(autoHideHeader,250):requestAnimationFrame(autoHideHeader);
}
}
);
$(window).on('resize',function(){
headerHeight = mainHeader.height();
}
);
function autoHideHeader(){
var currentTop = $(window).scrollTop();
( belowNavHeroContent.length > 0 )? checkStickyNavigation(currentTop) // secondary navigation below intro:checkSimpleNavigation(currentTop);
previousTop = currentTop;
scrolling = false;
}
function checkSimpleNavigation(currentTop){
//there's no secondary nav or secondary nav is below primary nav if (previousTop - currentTop > scrollDelta){
//if scrolling up...mainHeader.removeClass('is-hidden');
}
else if( currentTop - previousTop > scrollDelta && currentTop > scrollOffset){
//if scrolling down...mainHeader.addClass('is-hidden');
}
}
function checkStickyNavigation(currentTop){
//secondary nav below intro section - sticky secondary navvar secondaryNavOffsetTop = belowNavHeroContent.offset().top - secondaryNavigation.height() - mainHeader.height();
if (previousTop >= currentTop ){
//if scrolling up...if( currentTop < secondaryNavOffsetTop ){
//secondary nav is not fixedmainHeader.removeClass('is-hidden');
secondaryNavigation.removeClass('fixed slide-up');
belowNavHeroContent.removeClass('secondary-nav-fixed');
}
else if( previousTop - currentTop > scrollDelta ){
//secondary nav is fixedmainHeader.removeClass('is-hidden');
secondaryNavigation.removeClass('slide-up').addClass('fixed');
belowNavHeroContent.addClass('secondary-nav-fixed');
}
}
else{
//if scrolling down...if( currentTop > secondaryNavOffsetTop + scrollOffset ){
//hide primary navmainHeader.addClass('is-hidden');
secondaryNavigation.addClass('fixed slide-up');
belowNavHeroContent.addClass('secondary-nav-fixed');
}
else if( currentTop > secondaryNavOffsetTop ){
//once the secondary nav is fixed,do not hide primary nav if you haven't scrolled more than scrollOffsetmainHeader.removeClass('is-hidden');
secondaryNavigation.addClass('fixed').removeClass('slide-up');
belowNavHeroContent.addClass('secondary-nav-fixed');
}
}
}
}
);
CSS代码(reset.css):
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
CSS代码(style.css):
/* --------------------------------Primary style-------------------------------- */
*,*::after,*::before{box-sizing:border-box;}
html{font-size:62.5%;}
body{font-size:1.6rem;font-family:"Hind",sans-serif;color:#25283D;background-color:#ECF0F1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{color:#95a5a6;text-decoration:none;}
/* --------------------------------1. Auto-Hiding Navigation - Simple-------------------------------- */
.cd-auto-hide-header{position:fixed;z-index:2;top:0;left:0;width:100%;height:60px;background-color:#ffffff;/* Force Hardware Acceleration */
-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform;-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s;}
.cd-auto-hide-header::after{clear:both;content:"";display:block;}
.cd-auto-hide-header.is-hidden{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);}
@media only screen and (min-width:1024px){.cd-auto-hide-header{height:80px;}
}
.cd-auto-hide-header .logo,.cd-auto-hide-header .nav-trigger{position:absolute;top:50%;bottom:auto;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
.cd-auto-hide-header .logo{left:5%;}
.cd-auto-hide-header .logo a,.cd-auto-hide-header .logo img{display:block;}
.cd-auto-hide-header .nav-trigger{/* vertically align its content */
display:table;height:100%;padding:0 1em;font-size:1.2rem;text-transform:uppercase;color:#25283D;font-weight:bold;right:0;border-left:1px solid #f2f2f2;}
.cd-auto-hide-header .nav-trigger span{/* vertically align inside parent element */
display:table-cell;vertical-align:middle;}
.cd-auto-hide-header .nav-trigger em,.cd-auto-hide-header .nav-trigger em::after,.cd-auto-hide-header .nav-trigger em::before{/* this is the menu icon */
display:block;position:relative;height:2px;width:22px;background-color:#25283D;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.cd-auto-hide-header .nav-trigger em{/* this is the menu central line */
margin:6px auto 14px;-webkit-transition:background-color .2s;transition:background-color .2s;}
.cd-auto-hide-header .nav-trigger em::before,.cd-auto-hide-header .nav-trigger em::after{position:absolute;content:'';left:0;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;}
.cd-auto-hide-header .nav-trigger em::before{/* this is the menu icon top line */
-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px);}
.cd-auto-hide-header .nav-trigger em::after{/* this is the menu icon bottom line */
-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);}
@media only screen and (min-width:1024px){.cd-auto-hide-header .nav-trigger{display:none;}
}
.cd-auto-hide-header.nav-open .nav-trigger em{/* transform menu icon into a 'X' icon */
background-color:rgba(255,255,255,0);}
.cd-auto-hide-header.nav-open .nav-trigger em::before{/* rotate top line */
-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
.cd-auto-hide-header.nav-open .nav-trigger em::after{/* rotate bottom line */
-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}
.cd-primary-nav{display:inline-block;float:right;height:100%;padding-right:5%;}
.cd-primary-nav > ul{position:absolute;z-index:2;top:60px;left:0;width:100%;background-color:#ffffff;display:none;box-shadow:0 14px 20px rgba(0,0,0,0.2);}
.cd-primary-nav > ul a{/* target primary-nav links */
display:block;height:50px;line-height:50px;padding-left:5%;color:#25283D;font-size:1.8rem;border-top:1px solid #f2f2f2;}
.cd-primary-nav > ul a:hover,.cd-primary-nav > ul a.active{color:#8F3985;}
@media only screen and (min-width:1024px){.cd-primary-nav{/* vertically align its content */
display:table;}
.cd-primary-nav > ul{/* vertically align inside parent element */
display:table-cell;vertical-align:middle;/* reset mobile style */
position:relative;width:auto;top:0;padding:0;background-color:transparent;box-shadow:none;}
.cd-primary-nav > ul::after{clear:both;content:"";display:block;}
.cd-primary-nav > ul li{display:inline-block;float:left;margin-right:1.5em;}
.cd-primary-nav > ul li:last-of-type{margin-right:0;}
.cd-primary-nav > ul a{/* reset mobile style */
height:auto;line-height:normal;padding:0;border:none;}
}
.nav-open .cd-primary-nav ul,.cd-primary-nav ul:target{/*show primary nav - mobile only:target is used to show navigation on no-js devices */
display:block;}
@media only screen and (min-width:1024px){.nav-open .cd-primary-nav ul,.cd-primary-nav ul:target{display:table-cell;}
}
/* --------------------------------2. Auto-Hiding Navigation - with Sub Nav-------------------------------- */
.cd-secondary-nav{position:relative;z-index:1;clear:both;width:100%;height:50px;background-color:#25283D;/* Force Hardware Acceleration */
-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform;-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s;}
.cd-secondary-nav::after{/* gradient on the right - to indicate it's possible to scroll */
content:'';position:absolute;z-index:1;top:0;right:0;height:100%;width:35px;background:transparent;background:-webkit-linear-gradient(right,#25283D,rgba(37,40,61,0));background:linear-gradient(to left,#25283D,rgba(37,40,61,0));pointer-events:none;-webkit-transition:opacity .2s;transition:opacity .2s;}
.cd-secondary-nav.nav-end::after{opacity:0;}
.cd-secondary-nav ul,.cd-secondary-nav li,.cd-secondary-nav a{height:100%;}
.cd-secondary-nav ul{/* enables a flex context for all its direct children */
display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0 5%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cd-secondary-nav ul::after{clear:both;content:"";display:block;}
.cd-secondary-nav li{display:inline-block;float:left;/* do not shrink - elements float on the right of the element */
-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
.cd-secondary-nav li:last-of-type{padding-right:20px;}
.cd-secondary-nav a{display:block;color:#ffffff;opacity:.6;line-height:50px;padding:0 1em;}
.cd-secondary-nav a:hover,.cd-secondary-nav a.active{opacity:1;}
@media only screen and (min-width:1024px){.cd-secondary-nav{height:70px;overflow:visible;}
.cd-secondary-nav ul{/* reset mobile style */
display:block;text-align:center;}
.cd-secondary-nav li{/* reset mobile style */
float:none;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}
.cd-secondary-nav a{line-height:70px;}
.cd-secondary-nav a.active{box-shadow:inset 0 -3px #8F3985;}
}
/* --------------------------------3. Auto-Hiding Navigation - with Sub Nav + Hero Image-------------------------------- */
.cd-secondary-nav.fixed{position:fixed;top:60px;}
.cd-secondary-nav.slide-up{-webkit-transform:translateY(-60px);-ms-transform:translateY(-60px);transform:translateY(-60px);}
@media only screen and (min-width:1024px){.cd-secondary-nav.fixed{top:80px;/* fixes a bug where nav and subnab move with a slight delay */
box-shadow:0 -6px 0 #25283D;}
.cd-secondary-nav.slide-up{-webkit-transform:translateY(-80px);-ms-transform:translateY(-80px);transform:translateY(-80px);}
}
/* --------------------------------Main content-------------------------------- */
.cd-main-content{padding:60px 5% 2em;overflow:hidden;}
.cd-main-content.sub-nav{/* to be used if there is sub nav */
padding-top:110px;}
.cd-main-content.sub-nav-hero{/* to be used if there is hero image + subnav */
padding-top:0;}
.cd-main-content.sub-nav-hero.secondary-nav-fixed{margin-top:50px;}
.cd-main-content p{max-width:1024px;line-height:1.6;margin:2em auto;font-family:"David Libre",serif;color:#a5a8a9;}
@media only screen and (min-width:1024px){.cd-main-content{padding-top:80px;}
.cd-main-content.sub-nav{padding-top:150px;}
.cd-main-content.sub-nav-hero.secondary-nav-fixed{margin-top:70px;}
.cd-main-content p{font-size:2.4rem;}
}
/*adjust the positioning of in-page linkshttp://nicolasgallagher.com/jump-links-and-viewport-positioning/*/
.cd-main-content.sub-nav:target::before,.cd-main-content.sub-nav-hero:target::before{display:block;content:"";margin-top:-50px;height:50px;visibility:hidden;}
@media only screen and (min-width:1024px){.cd-main-content.sub-nav:target::before,.cd-main-content.sub-nav-hero:target::before{margin-top:-70px;height:70px;}
}
/* --------------------------------Intro Section-------------------------------- */
.cd-hero{/* vertically align its content */
display:table;width:100%;margin-top:60px;height:300px;background:url(../img/cd-hero-background.jpg) no-repeat center center;background-size:cover;}
.cd-hero .cd-hero-content{/* vertically align inside parent element */
display:table-cell;vertical-align:middle;text-align:center;}
@media only screen and (min-width:768px){.cd-hero{height:400px;}
}
@media only screen and (min-width:1024px){.cd-hero{height:600px;margin-top:80px;}
}
CSS代码(zzsc-demo.css):
@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.zzsc-container{margin:0 auto;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
.bgcolor-20{background:#494A5F;color:#D5D6E2;}
/* Header */
.zzsc-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;}
.zzsc-header h1{color:#6c7a89;font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.zzsc-header h1 span{font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.zzsc-demo a{color:#95a5a6;text-decoration:none;}
.zzsc-demo{width:100%;padding-bottom:1.2em;}
.zzsc-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #95a5a6;font-weight:700;}
.zzsc-demo a:hover{opacity:0.6;}
.zzsc-demo a.current{background:#fff;color:#6c7a89;}
/* Top Navigation Style */
.zzsc-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.zzsc-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.zzsc-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.zzsc-icon span{display:none;}
.zzsc-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.zzsc-footer{width:100%;padding-top:10px;}
.zzsc-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#494A5F;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;font-size:1.2em}
.related a h3{font-size:0.85em;font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-zzsc-home-outline:before{content:"\e5000";}
.icon-zzsc-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:1024px){.zzsc-header{padding:2em 10% 2em;}
.zzsc-header h1{font-size:1.4em;}
.zzsc-links{font-size:1.4em}
}
@media screen and (max-width:960px){.zzsc-header{padding:2em 10% 2em;}
.zzsc-header h1{font-size:1.2em;}
.zzsc-links{font-size:1.2em}
.related h3{font-size:1em;}
.related a h3{font-size:0.8em;}
}
@media screen and (max-width:766px){.zzsc-header h1{font-size:1.3em;}
.zzsc-links{font-size:1.3em}
}
@media screen and (max-width:640px){.zzsc-header{padding:2em 10% 2em;}
.zzsc-header h1{font-size:1em;}
.zzsc-links{font-size:1em}
.related h3{font-size:0.8em;}
.related a h3{font-size:0.6em;}
}
分享到QQ
分享到微博
微信扫一扫
