<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>
How to Change Image Dynamically when
User Scrolls using JavaScript ?
</
title
>
<
style
media
=
"screen"
>
.main-content {
height: 800px;
}
.footer {
position: sticky;
bottom: 0;
background-color: white;
}
.footerRow::after {
content: "";
clear: both;
display: table;
position: sticky;
bottom: 0;
width: 100%;
}
.footerColumn {
float: left;
width: 25%;
display: table;
position: relative;
margin: auto;
}
img {
width: 100%;
}
h1,
h3 {
color: green;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"main-content"
>
<
h1
>GeeksforGeeks</
h1
>
<
h3
>Section One</
h3
>
<
p
>Scroll here to see the change</
p
>
<
hr
>
<
h3
>Section Two</
h3
>
<
p
>Scroll here to see the change</
p
>
<
hr
>
<
h3
>Section Three</
h3
>
<
p
>Scroll here to see the change</
p
>
<
hr
>
<
h3
>Section Four</
h3
>
<
p
>Scroll here to see the change</
p
>
<
hr
>
</
div
>
<
div
class
=
"footer"
>
<
div
class
=
"footerRow"
>
<
div
class
=
"footerColumn"
>
<
img
src
=
id
=
"image1"
>
</
div
>
<
div
class
=
"footerColumn"
>
<
img
src
=
id
=
"image2"
>
</
div
>
<
div
class
=
"footerColumn"
>
<
img
src
=
id
=
"image3"
>
</
div
>
<
div
class
=
"footerColumn"
>
<
img
src
=
id
=
"image4"
>
</
div
>
</
div
>
</
div
>
<
script
>
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
var imageSource1 =
var imageSource2 =
var imageSource3 =
var imageSource4 =
var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");
var image3 = document.getElementById("image3");
var image4 = document.getElementById("image4");
if (document.documentElement.scrollTop <
150
) {
image1.src
=
imageSource1
;
image2.src
=
imageSource2
;
image3.src
=
imageSource3
;
image4.src
=
imageSource4
;
} else if (
document.documentElement.scrollTop < 250) {
image1.src
=
imageSource2
;
image2.src
=
imageSource3
;
image3.src
=
imageSource4
;
image4.src
=
imageSource1
;
} else if (
document.documentElement.scrollTop < 350) {
image1.src
=
imageSource3
;
image2.src
=
imageSource4
;
image3.src
=
imageSource1
;
image4.src
=
imageSource2
;
} else {
image1.src
=
imageSource4
;
image2.src
=
imageSource1
;
image3.src
=
imageSource2
;
image4.src
=
imageSource3
;
}
}
</script>
</
body
>
</
html
>