中企网络科技
  • 网站制作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优化-品牌设计
推荐阅读
西安网站建设之nofollow标签的 西安网站建设之nofollow标签的

Nofollow标签的存在已经很久了,但时至今日,很多SEO人员......

网站推广快排系统哪家靠谱?如何判断哪 网站推广快排系统哪家靠谱?如何判断哪

随着搜索引擎排名白热化的竞争,市场上关于网站推广的产品也是五花八......

百度小程序适配H5网站规则技巧 百度小程序适配H5网站规则技巧

随着私域流量的兴起,各个品牌商都建立起了自己的私域流量池,百度也......

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

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

.com和.cn以及.net的域名区 .com和.cn以及.net的域名区

域名是用来表示一个单位、机构或个人在Intenret上有一个确定......

域名快收录是什么意思?如何实现网站百 域名快收录是什么意思?如何实现网站百

最近在一个聊天群里看到一个用户,为了购买一个快收录域名被骗的事情......

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

建站SEO咨询

小程序制作-小程序开发

小程序咨询

热门标签
热门资讯