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!
Top comments (0)