您好!欢迎来到源码码网

源码码网

热门搜索: 淘宝客    点赞系统    虚拟商城源码    小程序源码   

网站制作Js实现滑动时网站导航栏背景色渐变效果

  • 建站技巧
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-01-20 13:58
  • 阅读:273

在网站制作时,需要给网页加入一些指定的特效,会让网页变得特别漂亮,今天我们来简单的实现鼠标滑动时,网站导航栏背景色发生变化的动画特效。

我们在导航栏的代码下方加入一段Js代码,如下:

<script >
   //网页加载时运行
   $(function(){
       navHeader();
   
       $(window).scroll(function () {
           navHeader();
       })
   
     function navHeader() {
           if ($(window).scrollTop() >= 70) {
               $(".bxyheader").addClass("light");
           } else {
               $(".bxyheader").removeClass("light");
           }
       }
   })
</script>


简单说一下大概的实现逻辑,当鼠标没有滑动,也即就是网站处于顶部时,我们通过css样式给导航栏添加默认的背景色,这个根据自己的实际需要来添加,可以是透明的,也可以是其他颜色,当鼠标滑动时,通过js代码的判断去动态修改导航栏的背景色,其中light为鼠标滑动时需要实现的导航背景颜色,具体的背景颜色css样式这里就不贴出来了,当然还有很多种实现方法,欢迎自己去实际体验。

全部评论(0)
推荐阅读
  • WordPress网站程序实现Tag标签自动生成内链
  • WordPress网站程序实现Tag标签自动生成内链
  • 在开发wordpress主题的时候,作为wordpress开发者,应该考虑到让wordpress主题有利于SEO优化。这些,我们在前面也介绍了一些,如:给首页添加关键词、描述,wordpress文章图片自动添加ALT属性……今天,我们来说说给wordpress程序通过设置tag标签自动网站内链。内链的好外,这里不再赘述,它的作用是让百度蜘蛛在你的网站爬行更多的地方。当然,我们可以通过wordpress插件来实现关键词内链,以下为通过代码的方式来实现:
  • 源码教程
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-09-25 00:02
  • 阅读:122
  • 什么是网站索引,索引和收录有什么区别?
  • 什么是网站索引,索引和收录有什么区别?
  • 对于初入SEO的很多同学来说,你可能会发现网站有很多收录,但是网站索引很低,要么就是网站索引量还可以,但是网站的收录却很一般,难道网站收录和网站索引不就是一回事吗?且听源码码网小编给大家分析:
  • 行业资讯
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-09-24 23:44
  • 阅读:114
  • 应客商城5.0版本重磅发布
  • 应客商城5.0版本重磅发布
  • 应客商城是专业的新零售电商分销系统,支持社区团购、多商户入驻、同城跑腿、门店收银系统等上百种营销插件,提供B2B、B2C、B2B2C、S2B、O2O等多场景电商系统解决方案以及生鲜配送系统解决方案,致力于帮助客户实现互联网转型。目前应客Saas电商系统5.0版本已发布,同时提供源码部署和saas两种解决方案,满足不同客户需求。
  • 行业资讯
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-09-15 22:01
  • 阅读:78
  • 音乐游戏推荐——总有一首歌治愈你
  • 音乐游戏推荐——总有一首歌治愈你
  • 在众多游戏品类之中,音游算是一个并不大众但始终有忠实粉丝的分类。虽然在各大应用商店的热门榜前几名不一定常能看见音游的身影,但总有几款经久不衰、获得玩家们一致的好评。
  • 行业资讯
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-09-13 23:16
  • 阅读:222
  • 微信多个功能更新,朋友圈能修改可见范围!
  • 微信多个功能更新,朋友圈能修改可见范围!
  • 微信多个功能更新,朋友圈能修改可见范围!iPhone用户更新微信至最新版,点击一条自己的朋友圈,点击右上方三个灰色的点会出现修改可见范围:公开、私密、部分可见、不给谁看,随后用户可自行修改,如果某个标签里的新增或移除好友,可见范围也将随更新,不过该功能还在内测中。
  • 行业资讯
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2022-08-24 18:56
  • 阅读:172
联系我们

QQ:2494243972、1105326722

投诉举报:1105326722@qq.com

广告合作:QQ 110532672

工作时间:周一至周六 9:00~18:00


联系客服
手机版

扫一扫进手机版
返回顶部