下滑固定导航栏插件Scroll滑动特效代码

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

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

以下是下滑固定导航栏插件Scroll滑动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en-US">
<head>

	<!-- Meta tags & title /-->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>Scroll</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>

<body>

<section id="screen1">

	<p>Scroll down</p>

	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Team</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>

</section>
	
<section id="screen2"></section>
<section id="screen3"></section>

<script type="text/javascript" src="jquery.min.js"></script>

<script>
   $(document).ready(function(){
	   $(window).bind('scroll', function() {
	   var navHeight = $( window ).height() - 70;
			 if ($(window).scrollTop() > navHeight) {
				 $('nav').addClass('fixed');
			 }
			 else {
				 $('nav').removeClass('fixed');
			 }
		});
	});
</script>
</body>
</html>

CSS代码(style.css):

/*Tutorial Name:Scroll To Top Then Fixed Navigation Effect With JQuery and CSSDescription:Create a sticky navigation bar that remains fixed to the top after scrollAuthor:Stanislav KostadinovAuthor URI:http://stanislav.itVersion:1.0.0 - 11.01.2014*/
*{margin:0;padding:0;}
a{text-decoration:none;}
/* This class is added on scroll */
.fixed{position:fixed;top:0;height:70px;z-index:1;}
body{color:#fff;font-family:'open-sans-bold';font-size:18px;text-align:center;}
/* Font Face Settings */
@font-face{font-family:'open-sans-bold';src:url('../fonts/open-sans/OpenSans-Bold.eot');src:url('../fonts/open-sans/OpenSans-Bold.eot?iefix') format('embedded-opentype'),url('../fonts/open-sans/OpenSans-Bold.ttf');font-weight:normal;}
/* Navigation Settings */
nav{position:absolute;bottom:0;width:100%;height:70px;background:#fff;}
nav li{display:inline-block;padding:24px 10px;}
nav li a{color:#757575;text-transform:uppercase;}
section{height:100vh;}
/* Screens Settings */
#screen1{background:#43b29d;}
#screen1 p{padding-top:200px;}
#screen2{background:#efc94d;}
#screen3{background:#e1793d;}
@media only screen and (max-width:520px){nav li{padding:24px 4px;}
nav li a{font-size:14px;}
}

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