Change Header Color when Scroll your page.

Hi Dev friends!
🙋

I want to write a small tutorial trick for change color of your fixed header when scroll your HTML page: it's simple and it's a nice view!

HTML: 📖

First of all create your classic header section:

<header>
   <div id="container-header">
      <h1> THIS IS MY HEADER </h1>
   </div>
</header>

<main>
   <div id="container-main">
     <h1> THIS IS MY BODY </h1>
   </div>
</main>

CSS: 💅

Create your style, and add a class (in this case ".change-color", and i added a border bottom) for change color of your header when will scroll the page.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Header */

#container-header {
    height: 70px;
    width: 100vw;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
}

/* Add this class when scroll page */

.change-color {
    border-bottom: 0.5px solid #EDEDED;
}

/* Main */

#container-main {
    width: 100vw;
    height: 1100px;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
}

jQuery: 🕺

Activate your class when scroll the page when is > 30, and remove this when is < 30.

$(document).on('scroll', function(){
    if ( $(window).scrollTop() > 30) {
        $('#container-header').addClass('change-color');
    } else {
        $('#container-header').removeClass('change-color');
    }
});

Thank's for reading!