演 示 下 载

简介

最近出现了一些这样的网站，当用户往下滚动时，顶部的导航菜单会变小或消失，往上滚动时，导航菜单又会变大或出现。这样可以腾出更多的区域显示主要内容，同时也不影响导航菜单的操作。甚至可能会因为导航菜单的变大变小、忽隐忽现引起用户的注意，提示他们是否需要点击导航菜单，进而提高用户体验。今天我们就来制作这样的导航菜单。

浏览器兼容

IE7+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

我们会用到 CSS2 的 display: fiexd 和 CSS3 的 transition 等属性，所以不兼容 IE6，而 IE7 – IE9 无动画效果。

使用方法

1、引入文件

<script src="js/jquery.min.js"></script>

2、HTML

<div class="header large">
    <div class="inner">
        <h1><a href="//www.dowebok.com/"><img src="images/logo.png" alt="logo"></a></h1>
        <ul class="nav">
            <li><a class="cur" href="//www.dowebok.com/" title="首页">首页</a></li>
            <li><a href="//www.dowebok.com/code" title="代码">代码</a></li>
            <li><a href="//www.dowebok.com/material" title="素材">素材</a></li>
            <li><a href="//www.dowebok.com/template" title="模板">模板</a></li>
        </ul>
    </div>
</div>

默认是 large 样式，当用户往下滚动一段距离时，把 large 换成 small。

3、css

* {
    margin: 0;
    padding: 0;
}
.header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #323436;
}
.inner {
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    zoom: 1;
}
.header h1 {
    float: left;
}
.header h1 img {
    display: block;
    border: 0;
}
.nav {
    float: right;
    list-style-type: none;
    font-family: "Microsoft Yahei";
}
.nav li {
    float: left;
    margin-left: 5px;
}
.nav a {
    float: left;
    color: #cecece;
    text-decoration: none;
}
.nav a: hover {
    background-color: #555;
}
.large .inner {
    padding: 20px 0;
}
.large h1 img {
    height: 64px;
}
.large .nav {
    padding-top: 10px;
}
.large .nav a {
    height: 44px;
    padding: 0 20px;
    line-height: 44px;
    font-size: 18px;
}
.small .inner {
    padding: 10px 0;
}
.small h1 img {
    height: 34px;
}
.small .nav {
    padding-top: 3px;
}
.small .nav a {
    height: 28px;
    padding: 0 10px;
    line-height: 28px;
    font-size: 14px;
}
.header, .header .inner, .header a, .header img, .header li {
    transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
}

large 和 small 分别是变大和变小的样式，最后还有一个动画过度。

4、JavaScript

$(function(){
    $(window).on('scroll', function(){
        if($(window).scrollTop() > 100){
            $('.header').removeClass('large').addClass('small');
        } else {
            $('.header').removeClass('small').addClass('large');
        }
    });
});