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

概述我们先先看一下下面的效果，用QQ截的图，效果很不清楚，但是能说明问题。怎么实现这样的效果呢？用得比较多的算是jQuery的waypoints插件了，其实不用

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

我们先先看一下下面的效果，用 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 像素时，导航就会像上面的效果那样自动缩小，非常简单，效果也非常不错。

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的实现滚动时动态缩小导航栏jQuery效果全部内容，希望文章能够帮你解决实现滚动时动态缩小导航栏jQuery效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。