中国红客联盟国际站联盟介绍联盟架构联盟文化联盟事记联盟邮箱购买特权捐助我们收藏本站
请登录
立即注册
首页Portal
资讯
圈子Group
贡献榜
关于我们
红客起源事记
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程代码交流 › html+css+js实现导航栏滚动渐变效果

[前端] html+css+js实现导航栏滚动渐变效果

1650 0
王子 2022-10-19 15:35:34 | 显示全部楼层 |阅读模式
目录

    先看效果：实现：总结：


先看效果：




实现：

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;
  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>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  13.         }
  14.         body{
  15.             height: 200vh;
  17.         }
  18.         .tou{
  19.              position: fixed;
  20.              top: 0;
  21.              left: 0;
  22.              padding: 25px 100px;
  23.              width: 100%;
  24.              display: flex;
  25.              justify-content: space-between;
  26.              align-items: center;
  27.             transition:  0.5s;
  28.          }
  29.         .logo{
  30.              position: relative;
  31.              font-size: 22px;
  32.              font-weight: 900;
  33.              letter-spacing: 1px;
  34.              color: rgb(28, 36, 148);
  35.          }
  36.          .logo::before{
  37.             content: '';
  38.             position: absolute;
  39.             left: -50px;
  40.             top: -15px;
  41.             width: 50px;
  42.             height: 50px;
  43.             background-image: url(logo.png);
  44.             background-size: 100%;
  45.          }
  46.          .biao{
  47.              position: relative;
  48.              display: flex;
  49.              justify-content: center;
  50.              align-content: center;
  51.             list-style: none;
  53.          }
  54.         .biao li{
  55.              position: relative;
  56.          }
  57.         .biao a{
  58.              position: relative;
  59.              margin: 0 10px;
  60.              font-size: 18px;
  61.              font-family: 'fangsong';
  62.              font-weight: bold;
  63.              color: rgb(28, 36, 148);
  64.              text-decoration: none;
  66.          }
  68.         .bian{
  69.             padding: 15px 100px;
  70.             background-color: rgb(71, 105, 219);
  71.         }
  72.         .bian .logo,.tou.bian a{
  73.             color: rgb(252, 247, 247);
  74.         }
  75.        /*  背景图样式 */
  76.         .bjimg {
  77.       position: fixed;
  78.       top: 0;
  79.       left: 0;
  80.       width: 100%;
  81.       height: 100%;
  82.       min-width: 1000px;
  83.       z-index: -10;
  84.       zoom: 1;
  85.       background-color: #fff;
  86.       background-image: url(11.jpg) ;
  87.       background-repeat: no-repeat;
  88.       background-size: cover;
  89.       -webkit-background-size: cover;
  90.       -o-background-size: cover;
  91.       background-position: center 0;
  92.     }
  94.     </style>
  95. </head>
  96. <body>
  97.     <!-- 背景图 -->
  98.     <div class="bjimg"></div>
  100.    <!--  导航栏 -->
  101.     <div class="tou">
  102.         <sapn class="logo"> 北极光。</sapn>
  103.         <ul class="biao">
  104.         <li><a href="#"><a href="#">主页</a></li>
  105.         <li><a href="#">个人简介</a></li>
  106.         <li><a href="#">文章</a></li>
  107.         <li><a href="#">留言版</a></li>
  108.         <li><a href="#">友链</a></li>
  109.         </ul>
  110.     </div>
  111.     <script>
  112.         window.addEventListener('scroll',function(){
  113.             let tou = document.querySelector('.tou');
  115.            /*  tou.classList.toggle("bian",window.scrollY>0); */
  116.            if(window.scrollY>0)
  117.             {
  118.                 tou.classList.add("bian");
  119.             }else{
  120.                 tou.classList.remove("bian");
  121.             }
  122.         })
  123.     </script>
  124. </body>
  125. </html>
复制代码
总结：

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

本帖子中包含更多资源

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

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

王子

创始人

关注
  • 1101
    主题
  • 105
    粉丝
  • 59
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天