jQuery页面滚动顶部悬浮导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery页面滚动顶部悬浮导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- SCRIPTS -->
	<script src="jQuery/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.zlight.menu.1.0.min.js"></script>
	<!-- STYLES -->
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	<link rel="stylesheet" href="css/font-awesome.min.css" media="screen">
	<link rel="stylesheet" href="css/style.css" media="screen">
	<link rel="stylesheet" href="css/zlight.menu.css" media="screen">
	<title>jQuery页面滚动顶部悬浮导航</title>
	<script>
		$(document).ready(function(){
			$('#zlight-nav').zlightMenu();
		});
	</script>
</head>
<body>
	<div class="container" id="main">
		
		<div class="row">
			<div class="col-lg-12">
				<h4>Default:</h4>
			</div>
		</div>

		<div class="row">
			<div class="col-lg-12">

				<nav id="zlight-nav">
					<ul id="zlight-main-nav">
						<li class="zlight-active"><a href="#">Home</a></li>
						<li class="zlight-dropdown">
							<a href="#">Blog <i class="icon-angle-down"></i></a>
							<ul class="zlight-submenu">
								<li><a href="#">Link 1</a></li>
								<li><a href="#">Link 2</a></li>
								<li><a href="#">Link 3</a></li>
							</ul>
						</li>
						<li><a href="#">Portfolio</a></li>
						<li class="zlight-dropdown">
							<a href="#">Pages <i class="icon-angle-down"></i></a>
							<ul class="zlight-submenu">
								<li><a href="#">Link 1</a></li>
								<li><a href="#">Link 2</a></li>
								<li><a href="#">Link 3</a></li>
								<li class="zlight-dropdown">
									<a href="#">Dropdown <i class="icon-angle-right"></i></a>
									<ul class="zlight-submenu">
										<li><a href="#">Link 1</a></li>
										<li><a href="#">Link 2</a></li>
										<li><a href="#">Link 3</a></li>
										<li class="zlight-dropdown">
											<a href="#">Dropdown <i class="icon-angle-right"></i></a>
											<ul class="zlight-submenu">
												<li><a href="#">Link 1</a></li>
												<li><a href="#">Link 2</a></li>
												<li><a href="#">Link 3</a></li>
												<li><a href="#">Link 4</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li><a href="#">Link 5</a></li>
							</ul>
						</li>
						<li><a href="#">Contact</a></li>
						<li><a href="#">About</a></li>
					</ul>
					<!-- MOBILE NAV -->
					<div id="zlight-mobile-nav">
						<span>Menu</span>
						<i class="icon-reorder zlight-icon"></i>
						<select></select>
					</div>
				</nav> <!-- nav close -->

			</div>
		</div>
		
		<div class="row">
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 prev-con">
				<h5>Default</h5>
				<a href="index.html" class="prev"><img src="images/1.jpg" alt="preview" class="img-responsive"></a>
			</div>
			<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 prev-con">
				<h5>Custom</h5>
				<a href="prev1.html" class="prev"><img src="images/2.jpg" alt="preview" class="img-responsive"></a>
			</div>
		</div>

		<div class="row">
			<div class="col-lg-12">
				<h4 class="zlight-hhh">jQuery页面滚动顶部悬浮导航</h4>
			</div>
		</div>

		<div class="row" style="margin-bottom:900px;">
			<div class="col-lg-12">
				<p>Z Light Menu is the simple responsive navigation plugin, 
				working with media queries, which can be easy transformed for 
				mobile devices.</p>
				<p><h4 style="margin-top:30px;">Features:</h4>
					<ul>
						<li>Responsive</li>
						<li>Simple to Use</li>
						<li>Cross Browsers</li>
						<li>Fully customizable</li>
						<li>Retina ready (Font Awesome integrated)</li>
						<li>Min version: 5kb</li>
					</ul>
				</p><p>Scroll down (don&#39;t forget to remove the frame)</p>
			</div>
		</div>

	</div> <!-- main close -->
	</div> <!-- container close -->
	<script src="js/bootstrap.min.js"></script>
	<script src="js/respond.min.js"></script>

</body>
</html>

JS代码(respond.min.js):

/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012:Scott Jehl,Paul Irish,Nicholas Zakas. Dual MIT/BSD license */
/*! NOTE:If you're already including a window.matchMedia polyfill via Modernizr or otherwise,you don't need this part */
window.matchMedia=window.matchMedia||function(a){
	"use strict";
	var c,d=a.documentElement,e=d.firstElementChild||d.firstChild,f=a.createElement("body"),g=a.createElement("div");
	return g.id="mq-test-1",g.style.cssText="position:absolute;
	top:-100em",f.style.background="none",f.appendChild(g),function(a){
	return g.innerHTML='&shy;
	<style media="'+a+'"> #mq-test-1{
	width:42px;
}
</style>',d.insertBefore(f,e),c=42===g.offsetWidth,d.removeChild(f),{
	matches:c,media:a}
}
}
(document);
	/*! Respond.js v1.1.0:min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
(function(a){
	"use strict";
	function x(){
	u(!0)}
var b={
}
;
	if(a.respond=b,b.update=function(){
}
,b.mediaQueriesSupported=a.matchMedia&&a.matchMedia("only all").matches,!b.mediaQueriesSupported){
	var q,r,t,c=a.document,d=c.documentElement,e=[],f=[],g=[],h={
}
,i=30,j=c.getElementsByTagName("head")[0]||d,k=c.getElementsByTagName("base")[0],l=j.getElementsByTagName("link"),m=[],n=function(){
	for(var b=0;
	l.length>b;
	b++){
	var c=l[b],d=c.href,e=c.media,f=c.rel&&"stylesheet"===c.rel.toLowerCase();
	d&&f&&!h[d]&&(c.styleSheet&&c.styleSheet.rawCssText?(p(c.styleSheet.rawCssText,d,e),h[d]=!0):(!/^([a-zA-Z:]*\/\/)/.test(d)&&!k||d.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&m.push({
	href:d,media:e}
))}
o()}
,o=function(){
	if(m.length){
	var b=m.shift();
	v(b.href,function(c){
	p(c,b.href,b.media),h[b.href]=!0,a.setTimeout(function(){
	o()}
,0)}
)}
}
,p=function(a,b,c){
	var d=a.match(/@media[^\{
	]+\{
	([^\{
	\}
]*\{
	[^\}
\{
	]*\}
)+/gi),g=d&&d.length||0;
	b=b.substring(0,b.lastIndexOf("/"));
	var h=function(a){
	return a.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+b+"$2$3")}
,i=!g&&c;
	b.length&&(b+="/"),i&&(g=1);
	for(var j=0;
	g>j;
	j++){
	var k,l,m,n;
	i?(k=c,f.push(h(a))):(k=d[j].match(/@media *([^\{
	]+)\{
	([\S\s]+?)$/)&&RegExp.$1,f.push(RegExp.$2&&h(RegExp.$2))),m=k.split(","),n=m.length;
	for(var o=0;
	n>o;
	o++)l=m[o],e.push({
	media:l.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:f.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")}
)}
u()}
,s=function(){
	var a,b=c.createElement("div"),e=c.body,f=!1;
	return b.style.cssText="position:absolute;
	font-size:1em;
	width:1em",e||(e=f=c.createElement("body"),e.style.background="none"),e.appendChild(b),d.insertBefore(e,d.firstChild),a=b.offsetWidth,f?d.removeChild(e):e.removeChild(b),a=t=parseFloat(a)}
,u=function(b){
	var h="clientWidth",k=d[h],m="CSS1Compat"===c.compatMode&&k||c.body[h]||k,n={
}
,o=l[l.length-1],p=(new Date).getTime();
	if(b&&q&&i>p-q)return a.clearTimeout(r),r=a.setTimeout(u,i),void 0;
	q=p;
	for(var v in e)if(e.hasOwnProperty(v)){
	var w=e[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";
	x&&(x=parseFloat(x)*(x.indexOf(B)>-1?t||s():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?t||s():1)),w.hasquery&&(z&&A||!(z||m>=x)||!(A||y>=m))||(n[w.media]||(n[w.media]=[]),n[w.media].push(f[w.rules]))}
for(var C in g)g.hasOwnProperty(C)&&g[C]&&g[C].parentNode===j&&j.removeChild(g[C]);
	for(var D in n)if(n.hasOwnProperty(D)){
	var E=c.createElement("style"),F=n[D].join("\n");
	E.type="text/css",E.media=D,j.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(c.createTextNode(F)),g.push(E)}
}
,v=function(a,b){
	var c=w();
	c&&(c.open("GET",a,!0),c.onreadystatechange=function(){
	4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)}
,4!==c.readyState&&c.send(null))}
,w=function(){
	var b=!1;
	try{
	b=new a.XMLHttpRequest}
catch(c){
	b=new a.ActiveXObject("Microsoft.XMLHTTP")}
return function(){
	return b}
}
();
	n(),b.update=n,a.addEventListener?a.addEventListener("resize",x,!1):a.attachEvent&&a.attachEvent("onresize",x)}
}
)(this);

CSS代码(style.css):

body{padding:0;margin:0;background-color:silver;}
#main{padding:30px 30px;background-color:#ffffff;}
#main > .row{margin-bottom:30px;}
h1,h2,h3,h4,h5,h6{text-transform:uppercase;}
.prev-con{text-align:center;}
.prev{display:inline-block;margin-bottom:20px;text-align:center;}
h5{font-weight:bold;}
.fec{font-size:34px;color:#FFB40C;padding-right:10px;}
.zlight-hhh{padding-bottom:10px;border-bottom:1px solid #FFB40C;}

CSS代码(zlight.menu.css):

#zlight-nav,#zlight-main-nav,#zlight-mobile-nav,#zlight-main-nav > li,#zlight-main-nav > li > a{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
/************** WRAP*************/
#zlight-nav{display:block;position:relative;width:100%;z-index:9999;}
/************** MAIN NAV*************/
#zlight-main-nav{list-style:none;margin:0;padding:0;display:none;border-right-width:1px;border-right-style:solid;}
/************** CLEAR*************/
#zlight-main-nav:before,#zlight-main-nav:after,#zlight-nav:before,#zlight-nav:after{display:table;content:" ";}
#zlight-main-nav:after,#zlight-nav:after{clear:both;}
/************** LI & A*************/
#zlight-main-nav > li{padding:0;margin:0;float:left;position:relative;display:block;-webkit-transition:background ease 0.3s;-moz-transition:background ease 0.3s;transition:background ease 0.3s;}
#zlight-main-nav > li > a{display:block;position:relative;text-decoration:none;text-transform:uppercase;outline:0;padding:0 22px;border-left-width:1px;border-right-width:1px;border-left-style:solid;border-right-style:solid;}
#zlight-main-nav > li:first-child > a{border-left:none;}
/************** DROPDOWN*************/
.zlight-dropdown:hover > .zlight-submenu{display:block;}
/************** SUBMENU*************/
.zlight-submenu{margin:0;padding:0;list-style:none;display:none;box-shadow:0 1px 7px rgba(0,0,0,0.3);position:absolute;top:100%;left:0;}
.zlight-submenu > li{float:none;position:relative;display:block;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;}
.zlight-submenu > li > a{display:block;float:none;text-decoration:none;outline:none;text-transform:uppercase;padding:10px 22px;border-top-width:1px;border-bottom-width:1px;border-top-style:solid;border-bottom-style:solid;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;}
.zlight-submenu > li:first-child > a{border-top:none;}
.zlight-submenu > li:last-child > a{border-bottom:none;}
.zlight-submenu .zlight-submenu{top:0;left:100%;}
/************** ICON*************/
#zlight-main-nav i{padding:0 5px;}
/***************************** MOBILE NAV****************************/
#zlight-mobile-nav{display:none;}
#zlight-mobile-nav > span{text-transform:uppercase;padding:0 10px 0 20px;float:left;}
#zlight-mobile-nav > .zlight-icon{float:right;padding:0 20px 0 10px;}
#zlight-mobile-nav > select{background:none;border:none;position:absolute;top:0;left:0;opacity:0;width:100%;cursor:pointer;}
#zlight-mobile-nav:before,#zlight-mobile-nav:after{display:table;content:" ";}
#zlight-mobile-nav:after{clear:both;}
/**************************** MEDIA QUERIES***************************/
/* Small devices (tablets,768px and up) */
@media (max-width:768px){#zlight-mobile-nav{display:block;}
}
@media (min-width:769px){#zlight-main-nav{display:block;}
}
/* Medium devices (desktops,992px and up) */
@media (min-width:992px){}
/* Large devices (large desktops,1200px and up) */
@media (min-width:1200px){}

附件:下载该文件资源,减少时间成本(增值服务)