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制作仿花瓣网固定顶部位置悬浮导航菜单的全部教程。