编程随想

会python真的可以为所欲为 by Python自学0(回) 10天前

这里还有人吗 by mikeKil1(回) 195天前

这里还有人吗 by mikeKil0(回) 195天前

每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。 by js特效0(回) 420天前

到处都是羊，不想上班 by Python自学0(回) 500天前

鸽子 by 张书娥0(回) 504天前

云代码 - javascript代码库

仿花瓣网的自动悬浮导航效果 jquery

2012-09-15 作者：神马举报

[javascript]代码库

<!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">
body, h1, ul {
	margin:0;
}
ul li {
	list-style-type:none;
}
#header {
	width:100%;
	border-top:solid 1px #ccc;
	border-bottom:solid 1px #ccc;
	text-align:center;
}
h1 {
	padding:10px 0;
	color:#D74452;
}
.nav {
	width:100%;
	background:#fff;
	margin:20px auto 0;
	border:solid 1px #ccc;
	zoom:1;
	border-radius:5px;
	box-shadow:0 1px 6px rgba(0, 0, 0, 0.1);
	color:#D74452;
}
.nav_scroll {
	position:fixed;
	width:100%;
	margin:0;
	left:0;
	top:0;
}
.nav:after {
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.nav ul li {
	float:left;
	margin:0 20px;
	height:30px;
	line-height:30px;
}
.nav ul li a {
	cursor:pointer;
}
.nav ul li a:hover {
	text-decoration:underline;
}
h2 {
	height:400px;
	line-height:400px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
                var topMain=$("#header").height()+20//是头部的高度加头部与nav导航之间的距离。
                var nav=$(".nav");
                $(window).scroll(function(){
                    if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除。
                        nav.addClass("nav_scroll");
                    }
                    else
                    {
                        nav.removeClass("nav_scroll");
                    }
                });
     
        })
</script>
</head>

<body>
<div id="header">
  <h1>花瓣网</h1>
</div>
<!--header-->
<div class="nav">
  <ul>
    <li><a>关注</a></li>
    <li><a>最新</a></li>
    <li><a>最热</a></li>
    <li><a>视频</a></li>
    <li><a>家居</a></li>
    <li><a>旅行</a></li>
  </ul>
</div>
<!--nav-->
<div style="background:#f9f9f9;color:#000;" id="cont">
  <h2>1</h2>
  <h2>2</h2>
  <h2>3</h2>
  <h2>4</h2>
  <h2>5</h2>
  <h2>6</h2>
  <h2>7</h2>
  <h2>8</h2>
  <h2>1</h2>
  <h2>2</h2>
  <h2>3</h2>
  <h2>4</h2>
  <h2>5</h2>
  <h2>6</h2>
  <h2>7</h2>
  <h2>8</h2>
</div>
</body>
</html>

刚进入网页导航栏是固定位置的