我们先先看一下下面的效果，用 QQ 截的图，效果很不清楚，但是能说明问题。怎么实现这样的效果呢？用得比较多的算是 jQuery 的 waypoints 插件了，其实不用 jQuery 插件，很简单的一段 jQuery 代码就可以实现这样的效果，不过要结合 CSS3 过渡，IE9 以下的浏览器效果可能就差一点了。
实现以上效果的关键代码如下。首先，用 jQuery 判断网页滚动，网页滚动的高度大于 120 像素时，添加 “small” 类到 nav 上，其他情况下，移除这个类。这个和本站之前的文章添加返回顶部功能有点类似，都是基于 scrollTop 来判断的。
- $(document).on("scroll", function() {
- if ($(document).scrollTop() > 120) {
- $("nav").addClass("small");
- } else {
- $("nav").removeClass("small");
- }
- });
然后，还需要 CSS 来配合，首先，顶部导航位置需要设为静态，然后导航变化时，加上 CSS3 过渡效果。
- nav {
- height:141px;
- background:#fff;
- border-bottom:1px solid #ccc;
- width:100%;
- position:fixed;
- top:0;
- left:0;
- z-index:10;
- -webkit-transition:all .3s;
- -moz-transition:all .3s;
- transition:all .3s
- }
- nav.small {
- height: 51px;
- }
下拉网页，下拉的高度超过 120 像素时，导航就会像上面的效果那样自动缩小，非常简单，效果也非常不错。
