001-导航条悬浮顶部

<!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>
posted @ 2016-08-21 19:23 灬伊天☂ 阅读(181) 评论(0) 收藏举报
刷新页面返回顶部