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

Detailed explanation of how to modify the style of el-select: popper-append-to-body and popper-class

How to modify the style of the el-select componen...

Example of JSON output in HTML format (test interface)

To display the JSON data in a beautiful indented ...

Centos7 mysql database installation and configuration tutorial

1. System environment The system version after yu...

Summary of some related operations of Linux scheduled tasks

I have searched various major websites and tested...

The whole process of installing mysql5.7.22 under ARM64 architecture

MySQL download address: https://obs.cn-north-4.my...

A brief discussion on how to write beautiful conditional expressions in JS

Table of contents Multiple conditional statements...

A brief introduction to Linux environment variable files

In the Linux system, environment variables can be...

How to build and deploy Node project with Docker

Table of contents What is Docker Client-side Dock...

Example of how to set up a third-level domain name in nginx

Problem Description By configuring nginx, you can...

Mysql classic high-level/command line operation (quick) (recommended)

Since I need to learn how to build servers and da...

Implementation of Docker deployment of Django+Mysql+Redis+Gunicorn+Nginx

I. Introduction Docker technology is very popular...

How to clear default styles and set common styles in CSS

CSS Clear Default Styles The usual clear default ...

Solution to the Mysql ERROR 1045 (28000): Access denied for user root@localhost problem in Ubuntu system

First way: skip-grant-tables: Very useful mysql s...

Vue conditional rendering v-if and v-show

Table of contents 1. v-if 2. Use v-if on <temp...

Detailed example of reading speed of js objects

1. Accessing literals and local variables is the ...