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

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

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

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

dynamicscroll

怎么实现这样的效果呢?用得比较多的算是 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 像素时,导航就会像上面的效果那样自动缩小,非常简单,效果也非常不错。

本站提供 WordPress 主题定制开发服务

本站长期承接 WordPress 主题、插件、基于 WooCommerce 的商店商城开发业务。 我们有 8 年 WordPress 开发经验,如果你想 用 WordPress 开发网站, 请联系 QQ: 470266798,或邮箱: 4626395@gmail.com 咨询。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*