DEV Community

Cover image for Change Header Color when Scroll your page.
Luca
Luca

Posted on

6 3

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>

Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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');
    }
});

Enter fullscreen mode Exit fullscreen mode

Thank's for reading!

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more