There are a couple of issues with the jQuery code you're attempting to use:
1. You are only checking the scroll position on page load - it should be continuously checked inside the scroll event like this:
$(window).on('scroll', function( /* handler function */));
2. Changing the image through CSS won't work since the image isn't displayed using CSS. Instead, you can change the src of the img element like so:
$(".image-test img").attr("src", imgUrl);
3. Make sure to check for the bottom of the page content element where the replacement image is supposed to be swapped back. Retrieve it using this method:
var contentTop = $(".page-content").offset().top;
var contentBottom = contentTop + $(".page-content").outerHeight(true);
4. Ensure you check if the scroll lies between these positions:
if (($(this).scrollTop() > contentTop) && ($(this).scrollTop() < contentBottom))
To make this responsive and functional even when the screen size changes post-page load (e.g., resizing the window), incorporate it within the scroll event handler as well.
Complete Code for the Function
// Get the URL of the image for swapping back
defaultImgUrl = $(".image-test img").attr("src");
// Check the scroll position during scrolling
$(window).on('scroll', function() {
// Retrieve the top and bottom positions of the page content
var contentTop = $(".page-content").offset().top;
var contentBottom = contentTop + $(".page-content").outerHeight(true);
// Verify if the scroll position is within the page content
if (($(this).scrollTop() > contentTop) && ($(this).scrollTop() < contentBottom)) {
// Alter the image URL
$(".image-test img").attr("src", "https://lorempixel.com/output/nature-q-c-100-50-2.jpg");
} else {
$(".image-test img").attr("src", defaultImgUrl);
}
});
Working Example:
// Get the URL of the image for swapping back
defaultImgUrl = $(".image-test img").attr("src");
// Check the scroll position during scrolling
$(window).on('scroll', function() {
// Retrieve the top and bottom positions of the page content
var contentTop = $(".page-content").offset().top;
var contentBottom = contentTop + $(".page-content").outerHeight(true);
// Verify if the scroll position is within the page content
if (($(this).scrollTop() > contentTop) && ($(this).scrollTop() < contentBottom)) {
// Change the image URL
$(".image-test img").attr("src", "https://lorempixel.com/output/nature-q-c-100-50-2.jpg");
} else {
$(".image-test img").attr("src", defaultImgUrl);
}
});
.section1,
.section2,
.page-content {
height: 100vh;
}
.section1 {
background-color: green;
padding-top: 50px;
}
.section2 {
background-color: red;
}
nav {
height: 50px;
background-color: grey;
position: fixed;
width: 100%;
display: flex;
}
.image-test img {
width: 100px;
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div class="image-test">
<img src="https://lorempixel.com/output/nature-q-c-100-50-5.jpg" alt="">
</div>
<div>
<p>Change me to a different picture once I reach the top of the page content. Then change me back to the same picture as the one I had in the hero once I reach the footer.</p>
</div>
</nav>
<div class="section1" id="hero">
<h1>Hero</h1>
</div>
<div class="page-content">
<h1>Page Content</h1>
</div>
<div class="section2">
<h1>Footer</h1>
</div>