<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<title>导航条悬浮置顶</title>
<script type="text/javascript">
/*导航条悬浮顶部*/
$(function(){
var wintop=$(".div_nav").offset();
$(window).scroll(function(){
var mytop=$(window).scrollTop();
if(mytop>wintop.top){
$(".div_nav").addClass("div_nav_add");
/*$(".div_nav").css({top:"0",position:"fixed"});*/
}else
{
$(".div_nav").removeClass("div_nav_add");
/*$(".div_nav").css({top:"",position:""});*/
}
});
});
</script>
<style type="text/css">
body{
height:2000px;
}
/* 导航条 */
.div_nav{
z-index:99;
}
/* 列表-去除标记圆点 */
.div_nav ul{
list-style-type:none;
margin:0px;
padding:0px;
margin-left:150px;
}
/* 列表项-横向排列 */
.div_nav li{
display:inline;
}
/* 导航条悬浮顶部 */
.div_nav_add{
position:fixed;
top:0px;
}
</style>
</head>
<body>
<div class="div_nav">
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>
</div>
</body>
</html>
时间： 2024-11-03 04:03:58