jQuery顶部定位导航特效代码

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

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

以下是 jQuery顶部定位导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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滚动顶部定位导航</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/work.js"></script>
</head>
<body style="height:3000px;">
<br />
<br />
<br />
<br />
<br />
<div class="navbg">
  <div class="col960">
    <ul id="navul" class="cl">
      <li class="navhome"><a href="http://www.baidu.com" target="_blank">HOME</a></li>
      <li><a href="http://www.baidu.com" title="Html">Html</a>
        <ul>
          <li><a href="http://www.baidu.com" title="HTML">HTML</a></li>
          <li><a href="http://www.baidu.com" title="HTML5">HTML5</a></li>
        </ul>
      </li>
      <li><a href="http://www.baidu.com" title="CSS">CSS</a>
        <ul>
          <li><a href="http://www.baidu.com" title="CSS入门">CSS入门</a></li>
          <li><a href="http://www.baidu.com" title="CSS工具">CSS工具</a></li>
          <li><a href="http://www.baidu.com" title="CSS技巧">CSS技巧</a></li>
          <li><a href="http://www.baidu.com" title="CSS实例">CSS实例</a></li>
          <li><a href="http://www.baidu.com" title="CSS3">CSS3</a></li>
          <li><a href="http://www.baidu.com" title="CSS hack">CSS hack</a></li>
          <li><a href="http://www.baidu.com" title="CSS2.0 手册">CSS2.0 手册</a></li>
        </ul>
      </li>
      <li><a href="http://www.baidu.com" title="网页特效">网页特效</a>
        <ul>
          <li><a href="http://www.baidu.com" title="导航菜单">导航菜单</a></li>
          <li><a href="http://www.baidu.com" title="表单按钮">表单按钮</a></li>
          <li><a href="http://www.baidu.com" title="表格图层">表格图层</a></li>
          <li><a href="http://www.baidu.com" title="图片特效">图片特效</a></li>
          <li><a href="http://www.baidu.com" title="滚动特效">滚动特效</a></li>
          <li><a href="http://www.baidu.com" title="文字特效">文字特效</a></li>
          <li><a href="http://www.baidu.com" title="时间日期">时间日期</a></li>
          <li><a href="http://www.baidu.com" title="窗口特效">窗口特效</a></li>
          <li><a href="http://www.baidu.com" title="鼠标特效">鼠标特效</a></li>
        </ul>
      </li>
      <li><a href="http://www.baidu.com" title="前端资讯">前端资讯</a>
        <ul>
          <li><a href="http://www.baidu.com" title="用户体验">用户体验</a></li>
          <li><a href="http://www.baidu.com" title="前端观察">前端观察</a></li>
          <li><a href="http://www.baidu.com" title="职业生涯">职业生涯</a></li>
        </ul>
      </li>
      <li><a href="http://www.baidu.com" title="前端技巧">前端技巧</a>
        <ul>
          <li><a href="http://www.baidu.com" title="布局技巧">布局技巧</a></li>
          <li><a href="http://www.baidu.com" title="网页字体">网页字体</a></li>
          <li><a href="http://www.baidu.com" title="flash">flash</a></li>
        </ul>
      </li>
      <li><a href="http://www.baidu.com" title="杂七杂八">杂七杂八</a>
        <ul>
          <li><a href="http://www.baidu.com" title="帝国cms">帝国cms</a></li>
          <li><a href="http://www.baidu.com" title="电脑技巧">电脑技巧</a></li>
          <li><a href="http://www.baidu.com" title="随笔杂谈">随笔杂谈</a></li>
        </ul>
      </li>
      <li><a href="http://www.baidu.com" title="Javascript">Javascript</a>
        <ul>
          <li><a href="http://www.baidu.com" title="Jquery">Jquery</a></li>
          <li><a href="http://www.baidu.com" title="Js学习">Js学习</a></li>
          <li><a href="http://www.baidu.com" title="Js教程">Js教程</a></li>
        </ul>
      </li>
      <li><a href="http://www.baidu.com" title="网站优化">网站优化</a>
        <ul>
          <li><a href="http://www.baidu.com" title="SEO杂谈">SEO杂谈</a></li>
          <li><a href="http://www.baidu.com" title="站长工具">站长工具</a></li>
          <li><a href="http://www.baidu.com" title="经验分享">经验分享</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<script  type="text/javascript"> 
$(".navbg").capacityFixed();
</script>
</body>
</html>

JS代码(bottom.js):

document.writeln("<script src=\"http://s13.cnzz.com/stat.php?id=4849440&web_id=4849440\" language=\"JavaScript\"></script>");
	document.writeln("<script type=\"text/javascript\" charset=\"utf-8\" src=\"http://tui.cnzz.net/cs.php?id=1000009022\"></script>");
	document.writeln("<script type=\"text/javascript\">");
	document.writeln("/*两侧浮动 120*270*/
");
	document.writeln("var cpro_id = \"u1089586\";
	");
	document.writeln("</script>");
	document.writeln("<script src=\"http://cpro.baidustatic.com/cpro/ui/f.js\" type=\"text/javascript\"></script>");
	document.writeln("<script type=\"text/javascript\">");
	document.writeln("var _bdhmProtocol = ((\"https:\" == document.location.protocol) ? \" https://\":\" http://\");
	");
	document.writeln("document.write(unescape(\"%3Cscript src=\'\" + _bdhmProtocol + \"hm.baidu.com/h.js%3Ff4e2ac2659d57bcbd4548697ffbebf01\' type=\'text/javascript\'%3E%3C/script%3E\"));
	");
	document.writeln("</script>");
	document.writeln("");
	function goTop(){
	var _btn = document.getElementById("goTop");
	if (document.documentElement && document.documentElement.scrollTop){
	var _con = document.documentElement;
}
else if (document.body){
	var _con = document.body;
}
window.onscroll = set;
	_btn.style.left = document.documentElement.scrollWidth/2 + 500 + "px";
	_btn.onclick = function (){
	_btn.style.display = "none";
	window.onscroll = null;
	this.timer = setInterval(function(){
	_con.scrollTop -= Math.ceil(_con.scrollTop * 0.3);
	if (_con.scrollTop == 0) clearInterval(_btn.timer,window.onscroll = set);
}
,10);
}
;
	function set(){
	_btn.style.display = _con.scrollTop ? 'block':"none";
}
}
;
	document.write("<div id=\"goTop\" style=\"position:fixed;
	bottom:60px;
	display:none;
	cursor:pointer;
	z-index:1;
	_position:absolute;
	_top:expression(eval(document.compatMode && document.compatMode == \'CSS1Compat\') ? documentElement.scrollTop + (documentElement.clientHeight - this.clientHeight) - 60:document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 60);
	\"><a href=\"javescript:void(0)\"></a></div>");
	window.onscroll = goTop;

JS代码(work.js):

/**author:Null*DATE:2013.5.24*/
$(function(){
	//头页登录$("#navul > li").not(".navhome").hover(function(){
	$(this).addClass("navmoon")}
,function(){
	$(this).removeClass("navmoon")}
)var maxwidth = 580;
	$(".news_text img").each(function(){
	if ($(this).width() > maxwidth){
	$(this).width(maxwidth);
}
}
);
}
);
	function $tomato(id){
	return document.getElementById(id);
}
function runCode(obj){
	var winname = window.open('',"_blank",'');
	winname.document.open('text/html','replace');
	winname.document.writeln(obj.value);
	winname.document.close();
}
(function($){
	$.fn.capacityFixed = function(options){
	var opts = $.extend({
}
,$.fn.capacityFixed.deflunt,options);
	var FixedFun = function(element){
	var top = opts.top;
	element.css({
	"top":top}
);
	$(window).scroll(function(){
	var scrolls = $(this).scrollTop();
	if (scrolls > top){
	if (window.XMLHttpRequest){
	element.css({
	position:"fixed",top:0}
);
}
else{
	element.css({
	top:scrolls}
);
}
}
else{
	element.css({
	position:"absolute",top:top}
);
}
}
);
	element.find(".close-ico").click(function(event){
	element.remove();
	event.preventDefault();
}
)}
;
	return $(this).each(function(){
	FixedFun($(this));
}
);
}
;
	$.fn.capacityFixed.deflunt={
	right:0,//相对于页面宽度的右边定位 top:95}
;
}
)(jQuery);

CSS代码(main.css):

body,div,ul,li{margin:0;padding:0;}
body{font-family:"微软雅黑",Arial,Helvetica,sans-serif;color:#333333;line-height:25px;font-size:14px;}
a:link,a:visited{text-decoration:none;color:#333333;}
a:hover{text-decoration:underline;color:#08A5E0;text-decoration:none;}
ul,ul li{list-style-type:none;}
.cl{zoom:1;}
/*网站头部*/
.col960{width:960px;margin:auto;}
.navbg{height:40px;width:100%;background:#08A5E0;box-shadow:1px 1px 7px #999;position:absolute;z-index:99;left:0;}
#navul li{float:left;margin-right:1px;width:100px;height:40px;position:relative;text-align:center;line-height:40px;}
#navul li.navhome{text-align:left;padding:0 0px 0 40px;width:60px;}
#navul li a:link,#navul li a:visited{color:#FFFFFF;}
#navul li ul{display:none;position:absolute;z-index:10000;top:38px;left:-1px;background:#006D96;border:#004E6C 1px solid;border-bottom:none;}
#navul li ul li{display:block;width:98px;float:none;margin-right:0px;height:28px;position:relative;line-height:28px;border-bottom:#004E6C 1px solid;font-size:12px;}
#navul li.navmoon{background:#006D96;border:#004E6C 1px solid;width:98px;height:38px;line-height:38px;}
#navul li.navmoon a{color:#FFFFFF;}
#navul li.navhome a:hover{color:#FCFF00;}
#navul li.navmoon ul{display:block;}
#navul li.navmoon ul a{display:block;width:98px;height:28px;line-height:28px;}
#navul li.navmoon ul a:hover{background:#000000;}

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