首页 > 代码库 > JS实现 网页下拉一段后固定导航条

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

2024-07-06 08:05:31   226人阅读

<!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>

 


联系
我们