css3+jquery实现固定头部的菜单

效果链接

效果说明：当你滚动页面的时候，菜单会放大，固定于头部一起滚动。

制作教程

一、创建如下的菜单结构

1. <div id="navi">
2.         <div id="menu" class="default">
3.             <ul>
4.                 <li><a href="#">首页</a></li>
5.                 <li><a href="#">jquery</a></li>
6.                 <li><a href="#">设计</a></li>
7.                 <li><a href="#">flex</a></li>
8.                 <li><a href="#">air</a></li>
9.                 <li><a href="#">ajax</a></li>
10.                 <li><a href="#">html5</a></li>           
11.                 <li><a href="#">css3</a></li>           
12.                 <li><a href="#">WordPress</a></li>           
13.             </ul>
14.         </div><!-- close menu -->
15.     </div><!-- close navi -->

这是一个菜单列表，结构上很简单，跟一般的菜单结构类似。

二、使用css3构建华丽菜单

接下来我们需要用到css3的知识来实现如demo上的菜单效果。
完整代码如下：

1. #navi {
2.     height: 50px;
3.     margin-top: 50px;
4.     font-size:14px;
5. }
6.  
7. #menu {
8.     /*背景*/   
9.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8AB9EB), color-stop(40%,#5C9DDC), color-stop(100%,#2374C5));
10.     background: -moz-linear-gradient(top, #8AB9EB, #5C9DDC, #2374C5);
11.     /*圆角*/   
12.     border-radius: 5px;
13.     -webkit-border-radius: 5px;
14.     -moz-border-radius: 5px;
15.     line-height: 50px;
16.     text-align: center;
17.     margin: 0 auto;
18.     padding: 0;
19. }
20.  
21.  
22. ul {
23.     padding: 0;
24. }
25.  
26. ul li {
27.     list-style-type: none;
28.     display: inline;
29.     margin-right: 15px;
30. }
31.  
32. ul li a {
33.     color: #fff;
34.     text-decoration: none;
35.     /*文字阴影*/
36.     text-shadow: 1px 1px 1px #000;
37.     padding: 6px 12px;
38.     /*圆角*/
39.     border-radius: 5px;
40.     -webkit-border-radius: 5px;
41.     -moz-border-radius: 5px;
42.    
43.     -webkit-transition-property: color, background;
44.     -webkit-transition-duration: 0.5s, 0.5s;
45. }
46.  
47. ul li a:hover {
48.     background:#FFC;
49.     color:#333;
50.  
51.     -webkit-transition-property: color, background;
52.     -webkit-transition-duration: 0.5s, 0.5s;
53. }
54.  
55. .default {
56.     width: 850px;
57.     height: 50px;
58.    
59.     box-shadow: 0 5px 20px #888;
60.     -webkit-box-shadow: 0 5px 20px #888;
61.     -moz-box-shadow: 0 5px 20px #888;
62. }
63.  
64. .fixed {
65.     position: fixed;
66.     top: -5px;
67.     left: 0;
68.     width: 100%;
69.    
70.     box-shadow: 0 0 40px #222;
71.     -webkit-box-shadow: 0 0 40px #222;
72.     -moz-box-shadow: 0 0 40px #222;
73. }

关键部分代码说明
1、给菜单添加渐变背景

1. /*背景*/   
2.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8AB9EB), color-stop(40%,#5C9DDC), color-stop(100%,#2374C5));
3.     background: -moz-linear-gradient(top, #8AB9EB, #5C9DDC, #2374C5);

webkit和firefox在渐变背景的使用上有出入，语法并不相同，firefox更简洁，webkit更符合标准。接下来明河详细说明下这些参数是什么意思。
先来看firefox的语法：

1. background: -moz-linear-gradient(top, #8AB9EB, #5C9DDC, #2374C5);

这里有四个参数，含义如下：

• 第一个参数，渐变的起始点，这里用到了简写，本来应该是 left top，火狐可以只用left，top是默认的，也就是至上向下。
• 第二个参数，起始渐变色
• 第三个参数，中间渐变色
• 第四个参数，终点渐变色

1. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8AB9EB), color-stop(40%,#5C9DDC),color-stop(100%,#2374C5));

webkit的参数比较多，含义如下：

• linear 线性渐变
• left top起始位置
• left bottom终点位置
• color-stop(0%,#8AB9EB)起始颜色
• color-stop(40%,#5C9DDC)中间颜色
• color-stop(100%,#2374C5)终点颜色

关于渐变背景的详细说明请点此。
2、给菜单容器添加圆角

1. /*圆角*/   
2.     border-radius: 5px;
3.     -webkit-border-radius: 5px;
4.     -moz-border-radius: 5px;

这个很简单，明河就不说明了
3、给菜单项加入如下样式

1. ul li a {
2.     color: #fff;
3.     text-decoration: none;
4.     /*文字阴影*/
5.     text-shadow: 1px 1px 1px #000;
6.     padding: 6px 12px;
7.     /*圆角*/
8.     border-radius: 5px;
9.     -webkit-border-radius: 5px;
10.     -moz-border-radius: 5px;
11.    
12.     -webkit-transition-property: color, background;
13.     -webkit-transition-duration: 0.5s, 0.5s;
14. }

留意这里的文字阴影的用法。

1. -webkit-transition-property: color, background;
2.     -webkit-transition-duration: 0.5s, 0.5s;

只适用于webkit浏览器，是控制背景透明度。

三、使用jquery让菜单跟随页面滚动

1. $(function(){
2.                  var menu = $('#menu'),
3.         pos = menu.offset();
4.        
5.         $(window).scroll(function(){
6.             if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
7.                 menu.fadeOut('fast', function(){
8.                     $(this).removeClass('default').addClass('fixed').fadeIn('fast');
9.                 });
10.             } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
11.                 menu.fadeOut('fast', function(){
12.                     $(this).removeClass('fixed').addClass('default').fadeIn('fast');
13.                 });
14.             }
15.         });
16. })

关键代码说明：

1. pos = menu.offset();

offset()获取菜单在当前页面的位置，返回的是一个object:{top:”XXpx”,left:”XXpx”}。

1. $(window).scroll(function(){
2. ........
3. });

监听窗体的滚动事件。

1. $(this).scrollTop()

scrollTop()将得到滚动条的滚动距离，非常重要的一个值。

1. $(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')

根据滚动距离，确定菜单是否还可见，不可见，则改变菜单的定位方式.

1. menu.fadeOut('fast', function(){
2.                     $(this).removeClass('default').addClass('fixed').fadeIn('fast');
3.                 });

给菜单加入了fixed样式：

1. .fixed {
2.     position: fixed;
3.     top: -5px;
4.     left: 0;
5.     width: 100%;
6.    
7.     box-shadow: 0 0 40px #222;
8.     -webkit-box-shadow: 0 0 40px #222;
9.     -moz-box-shadow: 0 0 40px #222;
10. }

有二个关键的点：

• position: fixed;将其定位方式改变成固定定位
• box-shadow ：加入阴影