<!DOCTYPE html>
<html>
<head>
<title>
Change the opacity during scroll
</title>
<style>
/* Margin and Padding is set to zero
so the body can occupy the full
screen page */
body {
margin: 0;
padding: 0;
background: green;
}
/* To put the header in the center of
the page we used justify-content and
align-items and set their value as
center, You can add any background image */
.header-bg {
position: fixed;
top:0;
left:0;
width: 100%;
height: 300px;
justify-content: center;
align-items: center;
display: flex;
}
/* Box shadow provides shadow effect
to the element */
.header-bg h2 {
margin: 0;
padding: 0;
color: #000;
text-align: center;
padding: 20px;
max-width: 80%;
}
/* Set "position:relative" then section can move
from its original position, by using position:relative,
the position of the section is not dependent on the
container. The box-sizing property is used to include
the padding and border in an element */
section {
position: relative;
top:100vh;
padding: 100px;
width: 100%;
min-height: 100vh;
box-sizing: border-box;
}
section h2 {
text-align:center;
margin: 0 0 50px;
padding: 0;
font-size: 40px;
color: #fff;
}
section p {
text-align:center;
color: #fff;
font-size: 1.3em;
}
</style>
</head>
<body>
<div class="header-bg">
<h2>Change Opactity on Scroll</h2>
</div>
<section>
<h2>GeeksforGeeks</h2>
<p>
A computer science portal for geeks
</p>
</section>
<script src=
</script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
$('.header-bg').css("opacity", 1- $(window).scrollTop()/700)
})
})
</script>
</body>
</html>