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

2021-05-24 0 1,400 百度已收录

我们先先看一下下面的效果,用 QQ 截的图,效果很不清楚,但是能说明问题。怎么实现这样的效果呢?用得比较多的算是 jQuery 的 waypoints 插件了,其实不用 jQuery 插件,很简单的一段 jQuery 代码就可以实现这样的效果,不过要结合 CSS3 过渡,IE9 以下的浏览器效果可能就差一点了。
实现滚动时动态缩小导航栏jQuery效果
实现以上效果的关键代码如下。首先,用 jQuery 判断网页滚动,网页滚动的高度大于 120 像素时,添加 “small” 类到 nav 上,其他情况下,移除这个类。这个和本站之前的文章添加返回顶部功能有点类似,都是基于scrollTop来判断的。

  1. $(document).on("scroll", function() {
  2.   if ($(document).scrollTop() > 120) {
  3.     $("nav").addClass("small");
  4.   } else {
  5.     $("nav").removeClass("small");
  6.   }
  7. });

然后,还需要 CSS 来配合,首先,顶部导航位置需要设为静态,然后导航变化时,加上 CSS3 过渡效果。

  1. nav {
  2.   height:141px;
  3.   background:#fff;
  4.   border-bottom:1px solid #ccc;
  5.   width:100%;
  6.   position:fixed;
  7.   top:0;
  8.   left:0;
  9.   z-index:10;
  10.   -webkit-transition:all .3s;
  11.   -moz-transition:all .3s;
  12.   transition:all .3s
  13. }
  14.  
  15. nav.small {
  16.   height: 51px;
  17. }

下拉网页,下拉的高度超过 120 像素时,导航就会像上面的效果那样自动缩小,非常简单,效果也非常不错。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 实现滚动时动态缩小导航栏jQuery效果 https://zhutizhen.com/15035.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章