• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    html+css+js实现导航栏滚动渐变效果

    发布者: 晋3555 | 发布时间: 2025-8-16 20:32| 查看数: 84| 评论数: 0|帖子模式

    先看效果：



    实现：

    1.定义导航栏的文字标签：
    1. <div class="tou">
    2.         <sapn class="logo"> 北极光。</sapn>
    3.         <ul class="biao">
    4.         <li><a href="#"><a href="#">主页</a></li>
    5.         <li><a href="#">个人简介</a></li>
    6.         <li><a href="#">文章</a></li>
    7.         <li><a href="#">留言版</a></li>
    8.         <li><a href="#">友链</a></li>
    9.         </ul>
    10.     </div>
    复制代码
    2.导航栏整体的样式：
    1. .tou{
    2.              position: fixed;
    3.              top: 0;
    4.              left: 0;
    5.              padding: 25px 100px;
    6.              width: 100%;
    7.              display: flex;
    8.              justify-content: space-between;
    9.              align-items: center;
    10.             transition:  0.5s;
    11.          }
    复制代码
    transition 过渡效果
    3.北极光这个logo的样式：
    1. .logo{
    2.              position: relative;
    3.              font-size: 22px;
    4.              font-weight: 900;
    5.              letter-spacing: 1px;
    6.              color: rgb(28, 36, 148);
    7.          }
    复制代码
    letter-spacing:文字（字母）间距
    4.给北极光logo定位一个图片在文字左边：
    1. .logo::before{
    2.             content: '';
    3.             position: absolute;
    4.             left: -50px;
    5.             top: -15px;
    6.             width: 50px;
    7.             height: 50px;
    8.             background-image: url(logo.png);
    9.             background-size: 100%;
    10.          }
    复制代码
    5.右边导航标签的一些样式，样式等都不做详细说明了，毕竟每个人的都不一样~：
    1. .biao{
    2.              position: relative;
    3.              display: flex;
    4.              justify-content: center;
    5.              align-content: center;
    6.             list-style: none;
    7.             
    8.          }
    9.         .biao li{
    10.              position: relative;
    11.          }
    12.         .biao a{
    13.              position: relative;
    14.              margin: 0 10px;
    15.              font-size: 18px;
    16.              font-family: 'fangsong';
    17.              font-weight: bold;
    18.              color: rgb(28, 36, 148);
    19.              text-decoration: none;

    21.          }
    复制代码
    6.当页面有滚动后导航栏的样式，padding上下变小，字体颜色变，有了蓝背景色：
    1. .bian{
    2.             padding: 15px 100px;
    3.             background-color: rgb(71, 105, 219);
    4.         }
    5.         .bian .logo,.tou.bian a{
    6.             color: rgb(252, 247, 247);
    7.         }
    复制代码
    7.简单js，实现部分：
    第一种：
    1. window.addEventListener('scroll',function(){
    2.             let tou = document.querySelector('.tou');
    3.            if(window.scrollY>0)
    4.             {
    5.                 tou.classList.add("bian");
    6.             }else{
    7.                 tou.classList.remove("bian");
    8.             }
    9.         })
    复制代码
    第二种：直接这样：
    1. window.addEventListener('scroll',function(){
    2.             let tou = document.querySelector('.tou');   
    3.             tou.classList.toggle("bian",window.scrollY>0);

    5.         })
    复制代码
    解释：
    scrollY属性：
    Window接口的只读scrollY属性返回文档当前垂直滚动的像素数。
    classList属性：
    add(class1, class2, …) 在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加；
    remove(class1, class2, …) 移除元素中一个或多个类名。
    toggle(class, true|false) 第一个参数为如果已存在类名则中移除的类名，并返回 false。如果该类名不存在则会在元素中添加类名，并返回 true。第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。
    所以：
    第一种js写法就是有滚动>0时就添加类.biao而实现渐变效果，当滚动<=0时就移除.biao类回到原来；
    第二种就是布尔值判断，当滚动>0就强制添加.biao类，当滚动<=0就移除.biao类；
    完整代码：
    1. <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        *{            margin: 0;            padding: 0;            box-sizing: border-box;                    }        body{            height: 200vh;                    }        .tou{
    2.              position: fixed;
    3.              top: 0;
    4.              left: 0;
    5.              padding: 25px 100px;
    6.              width: 100%;
    7.              display: flex;
    8.              justify-content: space-between;
    9.              align-items: center;
    10.             transition:  0.5s;
    11.          }        .logo{
    12.              position: relative;
    13.              font-size: 22px;
    14.              font-weight: 900;
    15.              letter-spacing: 1px;
    16.              color: rgb(28, 36, 148);
    17.          }         .logo::before{
    18.             content: '';
    19.             position: absolute;
    20.             left: -50px;
    21.             top: -15px;
    22.             width: 50px;
    23.             height: 50px;
    24.             background-image: url(logo.png);
    25.             background-size: 100%;
    26.          }         .biao{
    27.              position: relative;
    28.              display: flex;
    29.              justify-content: center;
    30.              align-content: center;
    31.             list-style: none;
    32.             
    33.          }
    34.         .biao li{
    35.              position: relative;
    36.          }
    37.         .biao a{
    38.              position: relative;
    39.              margin: 0 10px;
    40.              font-size: 18px;
    41.              font-family: 'fangsong';
    42.              font-weight: bold;
    43.              color: rgb(28, 36, 148);
    44.              text-decoration: none;

    46.          }                  .bian{
    47.             padding: 15px 100px;
    48.             background-color: rgb(71, 105, 219);
    49.         }
    50.         .bian .logo,.tou.bian a{
    51.             color: rgb(252, 247, 247);
    52.         }       /*  背景图样式 */        .bjimg {      position: fixed;      top: 0;      left: 0;      width: 100%;      height: 100%;      min-width: 1000px;      z-index: -10;      zoom: 1;      background-color: #fff;      background-image: url(11.jpg) ;      background-repeat: no-repeat;      background-size: cover;      -webkit-background-size: cover;      -o-background-size: cover;      background-position: center 0;    }    </style></head><body>    <!-- 背景图 -->    <div class="bjimg"></div>   <!--  导航栏 -->    <div class="tou">
    53.         <sapn class="logo"> 北极光。</sapn>
    54.         <ul class="biao">
    55.         <li><a href="#"><a href="#">主页</a></li>
    56.         <li><a href="#">个人简介</a></li>
    57.         <li><a href="#">文章</a></li>
    58.         <li><a href="#">留言版</a></li>
    59.         <li><a href="#">友链</a></li>
    60.         </ul>
    61.     </div>    <script>        window.addEventListener('scroll',function(){            let tou = document.querySelector('.tou');                                  /*  tou.classList.toggle("bian",window.scrollY>0); */           if(window.scrollY>0)            {                tou.classList.add("bian");            }else{                tou.classList.remove("bian");            }        })    </script></body></html>
    复制代码
    总结：

    到此这篇关于html+css+js实现导航栏滚动渐变效果的文章就介绍到这了,更多相关html css js 导航栏滚动渐变内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

    来源：互联网
    免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表