HTML + CSS + JS to achieve navigation bar scrolling gradient effect

Time:2021-4-1

First look at the effect:

在这里插入图片描述

realization:

1. Define the text label of the navigation bar

<div class="tou">
        < sapn class = "logo" > aurora borealis. </sapn>
        <ul class="biao">
        <li>The home page</a></li>
        <li>Personal profile</a></li>
        <li>The article</a></li>
        <li>The message board</a></li>
        <li>< a = "#" > friend chain</a></li>
        </ul>
    </div>

2. Overall style of navigation bar:


.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 effect
3. The style of the logo of Aurora Borealis:


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

Letter spacing: text (letter) spacing

4. Position a picture of the aurora borealis logo on the left side of the text:

 


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

5. Some styles and styles of navigation tags on the right are not explained in detail. After all, everyone’s is different ~:

 


.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. When the page has the style of navigation bar after scrolling, padding up and down becomes smaller, font color changes, and blue background color appears


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

7. Simple JS
The first one is the first one


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

The second way is to do it directly


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

        })

Explanation:
Scrolly attribute:
The read-only scrolly property of the window interface returns the number of pixels that the document is currently scrolling vertically.

classListProperties:
add(class1, class2, … )Add one or more class names to the element. If the specified class name already exists, it will not be added
remove(class1, class2, … )Remove one or more class names from the element.
toggle(class, true|false)The first parameter is ifIf a class name already exists, the name of the class to be removed from the list, and returns false. If the class nameIf it does not exist, it is added to the elementClass name and returns true. The second is an optional parameter, which is aBoolean valueUsed to set the elementForce to add or remove classes, whether or not the class name exists.

So:
The first JS writing method is to add class. Biao when scrolling > 0 to achieve gradient effect, and remove class. Biao when scrolling < 0 to return to the original;
The second is Boolean judgment. When scrolling > 0, the. Biao class will be added. When scrolling < 0, the. Biao class will be removed;

Full code:

<!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);
        }
       /*Background image style*/
        .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>
    <! -- background image -- >
    <div class="bjimg"></div>

   <! -- navigation bar -- >
    <div class="tou">
        < sapn class = "logo" > aurora borealis. </sapn>
        <ul class="biao">
        <li>The home page</a></li>
        <li>Personal profile</a></li>
        <li>The article</a></li>
        <li>The message board</a></li>
        <li>< a = "#" > friend chain</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>

Conclusion:

So far, this article about html + CSS + JS navigation bar scrolling gradient effect is introduced here. For more related HTML CSS JS navigation bar scrolling gradient content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!