jQuery检测滚动条距离顶部的高度—Jquery学习心得|开优网络原创整理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery检测滚动条距离顶部的高度 - 开优网络 - www.kaiu.net</title>
<style>
*{font-family: microsoft yahei;padding:0;margin:0;list-style:none;}
#navigation {
	position: fixed;
	top: -66px;
	left: 0;
	right: 0;
	width: 100%;
	height: 60px;
	background-color: #006699;
	-webkit-box-shadow: 0px 3px 3px 0px rgba(21, 21, 21, 0.1);
	box-shadow: 0px 3px 3px 0px rgba(21, 21, 21, 0.1);
	-webkit-transition: top .25s ease .5s;
	transition: top .25s ease .5s;
}
#navigation p {
	text-align: center;
	color: #fff;
	line-height:60px;
}
#percentageCounter {
	position: fixed;
	bottom: 10px;
	right: 10px;
}
h1 {font-size: +2em;}
.content {
	width: 40%;
	margin:50px auto;
	padding:25px;
	color:#fff;
	background-color:#0082c3;
	border-radius:5px;
}
p {margin-bottom: 1em;text-indent:2em;line-height:2;font-family:microsoft yahei;}
</style>
</head>
<body>
<div id="navigation">
  <p>开优网络 - www.kaiu.net  南昌网站开发</p>
</div>
<div id="percentageCounter"><h1>0%</h1></div>
<div class="content">
  <p>南昌开优网络有一支年轻有朝气、充满活力与创造力的团队，每位工作人员都在各自的阵地上有着出色的表现以及丰富的实战经验，主要致力于为企业及个人提供专业优质的互联网服务；综合网站建设、网站SEO、网络营销、推广维护等项目为一身，涉及机械、医疗、学校、服装、美容、房产等行业的互联网媒介服务。</p>

        <p>我们的特色：原创性代码，绝不套用模板，每一个代码都是经过精心推敲、思考，让您的网站不再平庸！我们将为您提供专业、优质网站建设服务，用非凡的创意和娴熟的技术，生成最具性价比的网站解决方案。</p>

        <p>在网络飞速发展的今天，各类大大小小的网络公司司空见惯，我们的团队都是来自大型网络公司的精英，一路走来我们不断提高专业能力，为客户提供更优质的服务，使我们和客户保持着稳定与和谐发展的服务关系。选择我们，我们会做的更好！</p>
		
		<p>想要为您量身定制网站？ 没问题，我们有专业的网站开发团队！</p>
<p>不会设计/策划网站形象界面？ 别担心，我们有优秀的网页设计师！</p>
<p>担心网站安全性没有保障？ 您放心，我们有专业的网站程序工程师！</p>
<p>产品与服务排名不好带不来客户？ 请相信，我们有资深的网站SEO工程师和推广专家！</p>
<p>没有完整的企业营销方案策略？相信南昌开优网络工作室是您不二的选择！</p>
<p>我们承诺：花最少的钱，为您提供最完善的服务体系！</p>
</div>
<script src='js/jquery.js'></script> 
<script>
   $(window).scroll(function(){
		var targetPercentage = 70;
		var navBarHeight = 66;
		var targetID = "#navigation";
		var scrollTo = $(window).scrollTop(),
		docHeight = $(document).height(),
		windowHeight = $(window).height();
		scrollPercent = (scrollTo / (docHeight-windowHeight)) * 100;
		scrollPercent = scrollPercent.toFixed(1);
		$('#percentageCounter h1').text(scrollPercent+"%");
		if(scrollPercent > targetPercentage){
			$(targetID).css({top:'0'});
		}
		if(scrollPercent < targetPercentage){
			$(targetID).css({ top: '-'+navBarHeight+'px' });
		}
	}).trigger('scroll');
  </script>
</body>
</html>