HTML+CSS+JS realizes the scrolling gradient effect of the navigation bar

HTML+CSS+JS realizes the scrolling gradient effect of the navigation bar

First look at the effect:

insert image description here

accomplish:

1. Define the text label of the navigation bar:

<div class="tou">
        <sapn class="logo"> Northern Lights. </sapn>
        <ul class="biao">
        <li><a href="#"><a href="#">Home</a></li>
        <li><a href="#">Personal Profile</a></li>
        <li><a href="#">Article</a></li>
        <li><a href="#">Message Board</a></li>
        <li><a href="#">Friends Links</a></li>
        </ul>
    </div>

2. The overall style of the 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
3. The style of the Northern Lights logo:

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

letter-spacing: text (letter) spacing

4. Position an image to the left of the text for the Northern Lights logo:

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

5. Some styles of the navigation labels on the right will not be described in detail, after all, everyone's styles are 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 is scrolled, the navigation bar style, padding becomes smaller, the font color changes, and a 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, implementation part:
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 method: directly like this:

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

        })

explain:
scrollY property:
The read-only scrollY property of the Window interface returns the number of pixels that the document is currently scrolled vertically.

classList attribute:
add(class1, class2, …) adds one or more class names to an element. If the specified class name already exists, it will not be added ;
remove(class1, class2, …) Removes one or more class names from an element.
toggle(class, true|false) The first parameter is the class name to be removed if it already exists , and returns false. If the class name does not exist, it will be added to the element and true will be returned. The second is an optional parameter, a Boolean value used to set whether the element is forced to add or remove the class , regardless of whether the class name exists.

so:
The first js writing method is to add the class .biao to achieve a gradient effect when the scroll is > 0, and remove the .biao class to return to the original state when the scroll is <= 0;
The second is a Boolean value judgment. When the scroll is > 0, the .biao class is added forcibly, and when the scroll is <= 0, the .biao class is 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"> Northern Lights. </sapn>
        <ul class="biao">
        <li><a href="#"><a href="#">Home</a></li>
        <li><a href="#">Personal Profile</a></li>
        <li><a href="#">Article</a></li>
        <li><a href="#">Message Board</a></li>
        <li><a href="#">Friends Links</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>

Summarize:

This is the end of this article about how to achieve the scrolling gradient effect of the navigation bar with html+css+js. For more related html+css+js navigation bar scrolling gradient content, please search 123WORDPRESS.COM's previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  CSS implements the function of hiding the search box (animation forward and reverse sequence)

>>:  N ways to achieve two-column layout with CSS

Recommend

MySQL 8.0.22 installation and configuration method graphic tutorial

This article records the installation and configu...

Several ways to set the expiration time of localStorage

Table of contents Problem Description 1. Basic so...

Comparison of efficiency between single-table query and multi-table join query in MySql database

During this period of time, while working on a pr...

Implementation steps of js object-oriented encapsulation cascading drop-down menu list

The cascading drop-down menu developed in this ex...

MySQL index usage instructions (single-column index and multi-column index)

1. Single column index Choosing which columns to ...

Detailed explanation of 8 ways to pass parameters in Vue routing components

When we develop a single-page application, someti...

jQuery implements navigation bar effect with expansion animation

I designed and customized a navigation bar with a...

Beginner's guide to building a website ⑦: It's so easy to make a beautiful website

I once promised that I would keep writing until pe...

MySQL implements a function similar to connect_by_isleaf MySQL method or stored procedure

Recently, there is a particularly abnormal busine...

Typical cases of MySQL index failure

Table of contents Typical Cases Appendix: Common ...

How to use node to implement static file caching

Table of contents cache Cache location classifica...

MySQL full-text search usage examples

Table of contents 1. Environmental Preparation 2....

How to recover accidentally deleted table data in MySQL (must read)

If there is a backup, it is very simple. You only...

Detailed tutorial on uploading and configuring jdk and tomcat on linux

Preparation 1. Start the virtual machine 2. git t...

Solution to the problem that Vue binding objects and array variables cannot be rendered after changing

Project scenario: There is a <ul> tag on th...