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

2024-07-28 22:21:15

1.定义导航栏的文字标签：
2.导航栏整体的样式：
3.北极光这个logo的样式：
4.给北极光logo定位一个图片在文字左边：
5.右边导航标签的一些样式，样式等都不做详细说明了，毕竟每个人的都不一样~：
6.当页面有滚动后导航栏的样式，padding上下变小，字体颜色变，有了蓝背景色：
7.简单js，实现部分：

第一种：
第二种：直接这样：

完整代码：

先看效果：

实现：

1.定义导航栏的文字标签：

<div class="tou">
        <sapn class="logo"> 北极光。</sapn>
        <ul class="biao">
        <li><a href="#"><a href="#">主页</a></li>
        <li><a href="#">个人简介</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">留言版</a></li>
        <li><a href="#">友链</a></li>
        </ul>
    </div>

2.导航栏整体的样式：

 .tou{
             position: fixed;
             top: 0;
             left: 0;
             padding: 25px 100px;
             width: 100%;
             display: flex;
             justify-content: space-between;
             align-items: center;
            transition:  0.5s;
         }

transition 过渡效果

3.北极光这个logo的样式：

 .logo{
             position: relative;
             font-size: 22px;
             font-weight: 900;
             letter-spacing: 1px;
             color: rgb(28, 36, 148);
         }

letter-spacing:文字（字母）间距

4.给北极光logo定位一个图片在文字左边：

 .logo::before{
            content: '';
            position: absolute;
            left: -50px;
            top: -15px;
            width: 50px;
            height: 50px;
            background-image: url(logo.png);
            background-size: 100%;
         }

5.右边导航标签的一些样式，样式等都不做详细说明了，毕竟每个人的都不一样~：

.biao{
             position: relative;
             display: flex;
             justify-content: center;
             align-content: center;
            list-style: none;

         }
        .biao li{
             position: relative;
         }
        .biao a{
             position: relative;
             margin: 0 10px;
             font-size: 18px;
             font-family: 'fangsong';
             font-weight: bold;
             color: rgb(28, 36, 148);
             text-decoration: none;

         }

6.当页面有滚动后导航栏的样式，padding上下变小，字体颜色变，有了蓝背景色：

 .bian{
            padding: 15px 100px;
            background-color: rgb(71, 105, 219);
        }
        .bian .logo,.tou.bian a{
            color: rgb(252, 247, 247);
        }

7.简单js，实现部分：

第一种：

window.addEventListener('scroll',function(){
            let tou = document.querySelector('.tou');
           if(window.scrollY>0)
            {
                tou.classList.add("bian");
            }else{
                tou.classList.remove("bian");
            }
        })

第二种：直接这样：

 window.addEventListener('scroll',function(){
            let tou = document.querySelector('.tou');
            tou.classList.toggle("bian",window.scrollY>0);

        })

解释：
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类；

完整代码：

<!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{
             position: fixed;
             top: 0;
             left: 0;
             padding: 25px 100px;
             width: 100%;
             display: flex;
             justify-content: space-between;
             align-items: center;
            transition:  0.5s;
         }
        .logo{
             position: relative;
             font-size: 22px;
             font-weight: 900;
             letter-spacing: 1px;
             color: rgb(28, 36, 148);
         }
         .logo::before{
            content: '';
            position: absolute;
            left: -50px;
            top: -15px;
            width: 50px;
            height: 50px;
            background-image: url(logo.png);
            background-size: 100%;
         }
         .biao{
             position: relative;
             display: flex;
             justify-content: center;
             align-content: center;
            list-style: none;

         }
        .biao li{
             position: relative;
         }
        .biao a{
             position: relative;
             margin: 0 10px;
             font-size: 18px;
             font-family: 'fangsong';
             font-weight: bold;
             color: rgb(28, 36, 148);
             text-decoration: none;

         }

        .bian{
            padding: 15px 100px;
            background-color: rgb(71, 105, 219);
        }
        .bian .logo,.tou.bian a{
            color: rgb(252, 247, 247);
        }
       /*  背景图样式 */
        .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">
        <sapn class="logo"> 北极光。</sapn>
        <ul class="biao">
        <li><a href="#"><a href="#">主页</a></li>
        <li><a href="#">个人简介</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">留言版</a></li>
        <li><a href="#">友链</a></li>
        </ul>
    </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导航栏滚动渐变内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

5分钟教你学会超简单的html+css魔幻霓虹灯文字特效

目录实现过程(完整源码在最后): 1. 定义h3标签: 2. 给个body背景色: 3. 设置h3基本样式: 4.定义动画,就是设置不同时间段显示不同颜色等实现闪烁霓虹灯效果~时间可以自己调自己要的效果: 完整源码: 话不多,先看效果: 今天继续分享简单但有趣的CSS创意特效~这个效果很简单看一分钟就明白了~初学前端的小伙伴们拿来练手是很不错的~ 实现过程(完整源码在最后): 1. 定义h3标签: <h3>Aurora Borealis night</h3> 2. 给个body背
教你使用html+css制作一个3D立体相册

目录前言一.先看效果二.实现步骤总结前言用css的transform属性做一个3D相册~~~值translate表示偏移:scale表示缩放:rotate就是转动. 一.先看效果二.实现步骤 1.我们知道一个正方体有6个面,所以定义一个父亲元素然后定义6个子元素作为6个面.每个面放一张图片.里面q1表示前面,h2表示后面,以此类推,就是首拼音. <div class="baba"> <div class="q1"> <im
html+css+js实现简易版ChatGPT聊天机器人

OpenAI的一款聊天机器人模型ChatGPT爆火,本篇文章用一百行html+css+js代码给大家制作一款简易的聊天机器人. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
使用html+css制作一个发光立方体特效

目录一.话不多,看效果二.实现(附完整代码) 1.定义标签: 2.定义外层盒子css: 3.定义盒子6个面分别的样式: 一.话不多,看效果二.实现(附完整代码) 1.定义标签: <div class="container"> <div class="q1"></div> <div class="h2"></div> <div class="z3">&
前端html+css实现动态生日快乐代码

生日送什么礼物总是要花一番心思,别出心裁不落俗套,什么礼物才能让那一个她开心呢?来看看前端大大用html+css实现动态生日快乐代码吧,亲测可用. <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Happy Birthday!</title> <style> @import url(&quo
使用html+css+js实现导航栏滚动渐变效果

目录实现: 1.定义导航栏的文字标签: 2.导航栏整体的样式: 3.北极光这个logo的样式: 4.给北极光logo定位一个图片在文字左边: 5.右边导航标签的一些样式,样式等都不做详细说明了,毕竟每个人的都不一样~: 6.当页面有滚动后导航栏的样式,padding上下变小,字体颜色变,有了蓝背景色: 7.简单js,实现部分: 第一种: 第二种:直接这样: 完整代码: 先看效果: 实现: 1.定义导航栏的文字标签: <div class="tou"> <sapn c
Fullpage.js固定导航栏-实现定位导航栏

FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和移动设备. 开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自动定位到这一页的标签 2.当然点击标签时,也是滚动到那一页而不是直接跳转的. 一.准备工
原生JS实现 MUI导航栏透明渐变效果

mui内置有H5版本的透明渐变导航控件,教程参考mui官网:透明渐变导航是一种解决滚动条通顶的变通方案,相比双webview,具有更高的性能和更好的动画效果: 下面通过本文给大家分享基于原生JS实现 MUI导航栏透明渐变效果,具体内容详情如下所示: 首先声明:由于backgroundColor的值采用的是RGBA,IE8及以下不支持,所以此效果不支持IE8及以下的浏览器 css代码 body,p,h1{margin: 0;} .module-layer{ width: 100%; positio
JS实现导航栏楼层特效

本文实例为大家分享了JS实现导航栏楼层的具体代码,供大家参考,具体内容如下知识点 1.多个事件有冲突的时候,需要设置flag判断是什么事件,进而进行后续操作. 2.楼层效果就是判断scrollTop和offsetTop的关系 3.引入工具库工具库运行效果导航与界面实现互动代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
js实现导航栏上下动画效果

本文实例为大家分享了js实现导航栏上下动画的具体代码,供大家参考,具体内容如下 obj.currentStyle[name] 与 getComputedStyle(obj,false)[name],一个是支持IE 一个支持FE完美运动js插件,能根据传进来的值,进行匹配,从而得到了理想的运动效果,也就是运行逻辑.实现上下动画动画效果就是控制元素height的值,通过不断的修改该值,就能呈现所谓的动画效果,这里就需要用到定时器定时器有两种重复不断的定时器 setInterval(fn,time
vue.js 底部导航栏一级路由显示子路由不显示的解决方法

最近利用vue第三方UI MuseUI开发webapp,然后在导航栏这里出现了问题,我需要在导航栏上的几个路由上显示底部导航栏,在其他路由上不显示,就这个问题,MuseUI的底部导航栏直接加载在app.vue里面,会每个页面都有导航栏,所以这种方式不可行,后来我真的使出了浑身解数,去MuseUI作者GitHub上面提问,无果,去segmentfault上面提问,无果,去vue官方群提问,无果,在提问之前,我都是经过一番搜索,思考的,但是这些都让我崩溃了.可能出错的地方从路由URL,museUI的
JS 实现导航栏悬停效果

JS-实现导航栏悬停先布个局: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <met
jquery+css实现侧边导航栏效果

最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1.效果图当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2.css代码这里是css代码,详情请看注释 <style> /*重置一些样式*/ *, *::a
JS 实现导航栏悬停效果(续2)

[JS-实现导航栏悬停] [JS-实现导航栏悬停(续)] 用Jquery重新写完这个页面之后,发现原来的方法还有是有几个问题: 1.首先Js代码冗余,导航条上的Tab是用js实现跳转而不是超链接: 2.还有导航条本身用fixed定位,但没有被设置为水平居中,而是在JS中更改left值使其居中. 问题2就导致了,当浏览器窗口尺寸发生变化的时候,浏览器中的div的位置都发生了变化,也就导致了没法通过页面中的div动态的给已fixed定位的导航条来定位. 最终的代码更改如下: test.html 复制
JS 实现导航栏悬停效果(续)

上次[JS-实现导航栏悬停]说到,导航栏悬停的那个页面在IE上运行的时候,会出导航栏不停的抖动问题. 解决方法如下: 将导航栏的定位方式由原来的absolute改为fixed,也不知道为什么改为fixed,就不抖了..-_-|| 复制代码代码如下: div.navigation{ width: 800px; height: 40px; background: red; margin: 4px auto 0; top: 400px; left: 0px; position: fixed; } 为