网站制作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样式这里就不贴出来了，当然还有很多种实现方法，欢迎自己去实际体验。