CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果
花瓣网以前的菜单效果还不错，首先是展示出全部的菜单，然后当你向下滑动网页的时候，菜单自动吸顶固定悬浮在浏览器的顶部，这个用户也能很好的切换不同的分类，查看更多的内容，而对于网站来说，也提升了不少的用户体验和交互性。
制作方法
本文将来为大家简单的介绍一下如何制作出这样的效果。
HTML代码
首先我们编写一些基本的HTML代码，分别给网站的LOGO定义一个#header类，给菜单定义.nav类。
<div id="header"><h1>花瓣</h1></div>
<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>
CSS代码
对于网站的LOGO，我们让其居中显示，然后再定义一个颜色和底部边框。
#header{
width:100%;
border-top:solid 1px #ccc;
border-bottom:solid 1px #ccc;
text-align:center;
}
对于菜单部分，我们让所有的菜单项都在一行显示，并对a标签定义足够的填充和间距。
.nav{width:500px;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: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;}
当用户向下滑动网页的时候，我们会给菜单添加一个类，这个能让菜单浮动到网页的顶部。
.nav_scroll{
position:fixed;
width:100%;
margin:0;
left:0;
top:0;
}
JavaScript代码
首先我们需要引入jquery库。
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
获取用户滑动网页的距离，如果大于网站LOGO的高度 导航的高度，那么就给导航添加一个nav_scroll类，如果小于这个高度，那么就移除nav_scroll类。
$(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");
}
});
})
好了，以上就是使用CSS3和jQuery制作仿花瓣网固定顶部位置悬浮导航菜单的全部教程。
您可能感兴趣的文章：
CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果
7款风格新颖的jQuery/CSS3菜单导航分享
js 固定悬浮效果的代码分享
JS右下角悬浮广告代码的简单示例
javascript 固定网页顶部悬浮导航菜单效果
CSS3 Animations创建返回顶部的平滑动画
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
网页中返回顶部代码(多种方法)另附注释说明
2013年优秀jQuery插件整理小结
jquery实现固定在顶部的菜单