jQuery实现滚动时动态缩小导航栏的效果

在开始介绍之前，我们先先看一下下面的效果，用QQ截的图，效果很不清楚，但是能说明问题。

怎么实现这样的效果呢？用得比较多的算是jQuery的waypoints插件了，其实不用jQuery插件，很简单的一段jQuery代码就可以实现这样的效果，不过要结合CSS3过渡，IE9以下的浏览器效果可能就差一点了。实现以上效果的关键代码如下。

首先，用jQuery判断网页滚动，网页滚动的高度大于120像素时，添加“small”类到nav上，其他情况下，移除这个类。这个和本站之前的文章给WordPress添加回到顶部功能有点类似，都是基于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像素时，导航就会像上面的效果那样自动缩小，非常简单，效果也非常不错。

原文来自：https://www.wpzhiku.com/add-scroll-to-top-button-towordpress/