中企网络科技
  • 网站制作13629274615
  • 网站制作
网站制作Js实现滑动时网站导航栏背景色渐变效果
作者:admin / 更新时间:2022-01-16 / 浏览次数:

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

首先来看看效果:

js实现动态修改导航兰背景色

滑动前背景色是透明的

js实现导航栏滑动时渐变

滑动后添加背景色



我们在导航栏的代码下方加入一段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样式这里就不贴出来了,当然还有很多种实现方法,欢迎自己去实际体验。


网页制作-网站推广-SEO优化-品牌设计
推荐阅读
自主(自助)建站需要什么样的专业知识 自主(自助)建站需要什么样的专业知识

随着互联网的普及,建站已经不再是什么难事,网站制作我们除了找专业......

应客知识付费系统PC+公众号+H5功 应客知识付费系统PC+公众号+H5功

虽然移动互联网的快发发展,知识付费,内容付费已经渐渐的融入到生活......

网站ICP备案与网站公安备案有什么区 网站ICP备案与网站公安备案有什么区

网站ICP备案与网站公安备案有什么区别网站ICP备案做的是服务器......

西安网站关键词快速排名优化低至1元/ 西安网站关键词快速排名优化低至1元/

西安网站关键词快速排名优化低至1元/词/天,先上词后计费,超快排......

西安网站改版二次开发哪家好?网站升级 西安网站改版二次开发哪家好?网站升级

网站运维工作是网站建成后的主要工作之一,包括对网站内容的更新,S......

西安网站SEO优化整站SEO优化排名 西安网站SEO优化整站SEO优化排名

单词优化业务: 网站单词优化 10词以上或者预存1000元以上 ......

热门栏目
中企业务
网站制作、网页设计、服务器租售、网站维护、网站代运营、网站托管、网站seo优化、自媒体营销、网站定制开发、商标logo设计、仿站建设、微信公众号、小程序开发、app开发等;——欢迎咨询,联系我们
网站建设-网站制作-网页设计

建站SEO咨询

小程序制作-小程序开发

小程序咨询

热门标签
热门资讯