<!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
>