CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果

固定顶部悬浮菜单效果我们现在在各种网站都能看到这种效果就是我们移到指定位置之后就会显示出导航菜单了，下面我们就一起来看看吧．
花瓣网以前的菜单效果还不错，首先是展示出全部的菜单，然后当你向下滑动网页的时候，菜单自动吸顶固定悬浮在浏览器的顶部，这个用户也能很好的切换不同的分类，查看更多的内容，而对于网站来说，也提升了不少的用户体验和交互性。
这里写图片描述
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库。

获取用户滑动网页的距离，如果大于网站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");
    }
});
})