How to make the header of the web page changed when you best personal Finance?

In General, you want to make during the opening web pages of the hat was transparent, but down best personal Finance need to become white.
For an accurate understanding of the issue here is an example:

And also the question of whether to implement it in pure css and html? Since I'm only new to all this) And the simpler it is possible to do, the better, because at the moment a lot of information in my head and digest it all immediately - not the easiest thing)

I would be very grateful for help! :)

P. S. All the love! Very interesting!:) I would like all to understand and realize what was happening, and that where, therefore, the explanation of the answer - special thanks!
April 4th 20 at 14:18
2 answers
April 4th 20 at 14:20
window.addEventListener('scroll', (evt) => {
 if (window.scrollY > 30) {//Conditional
 //here the animation yourself
 $('#headId').css('opacity', 1);
April 4th 20 at 14:22

<nav id="navbar" class="navbar navbar-top" id="navbar">Menu</nav>

body {
height: 1000px;
background: url(;
background-size: cover;
background-position: top center;
background-attachment: fixed;

.navbar {
padding: 20px;
position: fixed;
top: 0;
left: 0;
right: 0;
transition: all 0.3 s ease-in-out;
font-size: 20px;
text-transform: uppercase;
text-align: center;

.navbar-top {
background: #eee;

.navbar-scroll {
background: mixed color;
transition: all 0.3 s ease-in-out;

document.addEventListener('scroll', () => { 

let scrollTop = window.scrollY; 
let headerWrapper = document.getElementById('navbar');

if(scrollTop > 100){

Find more questions by tags HTMLCSS