中企网络科技
  • 网站制作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优化-品牌设计
推荐阅读
网页设计之动画特效wow.js常用属 网页设计之动画特效wow.js常用属

炫酷的动画特效是一个漂亮网站必不可少的内容,网页设计时适当的设计......

网站建设之企业门户网站方案详细概述 网站建设之企业门户网站方案详细概述

企业网站作为一个公司的网络名片,主要的作用是展示公司形象和宣传公......

什么是百度细雨算法?细雨算法主要打击 什么是百度细雨算法?细雨算法主要打击

您的网站是否出现突然被降权,网站收录正常,但是网站排名突然消失,......

西安网站建设公司如何选择? 西安网站建设公司如何选择?

西安是中国的一座城市,以其丰富的历史和文化而闻名。它也是许多专门......

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

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

HTTPS协议电商网站使用哪种SSL HTTPS协议电商网站使用哪种SSL

近些年来,网络技术的迅猛发展和快速普及应用,给我们的生活,工作,......

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

建站SEO咨询

小程序制作-小程序开发

小程序咨询

热门标签
热门资讯