码迷,mamicode.com
首页 > Web开发 > 详细

JS实现 网页下拉一段后固定导航条

时间:2014-05-30 05:32:14      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

bubuko.com,布布扣
<!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>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0px;}
#top{height:150px;text-align:center;}
#nav{width:100%;background-color:#069;}
#nav ul {height:42px;width:1000px;margin:0 auto;}
#nav ul li{ float:left;list-style:none;display:inline;}
#nav ul li a{border-left:1px solid #014a52;display:block;height:42px;line-height:42px;color:#fff;font-size:18px; text-decoration:none;padding:0 30px;}
.newcss{ position:fixed;top:2px;}
#con{width:1000px;height:1500px;background:#F6F6F6;margin:0 auto;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
    if($(window).scrollTop()>$("#top").height())
    {$("#nav").addClass("newcss");}
    else
    {$("#nav").removeClass("newcss");}
    })
})
</script>
</head>
<body>
<div id="top" >
<h1>网页下拉一段后固定导航条</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">&nbsp;首 页&nbsp;</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">品牌中心</a></li>
<li><a href="#">技术文章</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</div>
<div id="con">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>网页下拉一段后固定导航条</p>
<p>网页下拉一段后固定导航条</p>
<p>网页下拉一段后固定导航条</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>网页下拉一段后固定导航条</p>
<p>网页下拉一段后固定导航条</p>
<p>网页下拉一段后固定导航条</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>网页下拉一段后固定导航条</p>
<p>网页下拉一段后固定导航条</p>
<p>网页下拉一段后固定导航条</p>

</div>
</body>
</html>
bubuko.com,布布扣

 

JS实现 网页下拉一段后固定导航条,布布扣,bubuko.com

JS实现 网页下拉一段后固定导航条

标签:c   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/super-zhen/p/3757093.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!