您嘗試使用的 jQyery 代碼存在一些問題：
1.你只是在頁面加載時檢查滾動位置 - 你需要不斷檢查滾動事件：
$(window).on('scroll', function( /* handler function */));2.您試圖通過 CSS 更改圖像，但圖像未使用 CSS 顯示。相反，您可以像這樣更改元素src的：img
$(".image-test img").attr("src", imgUrl);3.您沒有檢查頁面內(nèi)容元素的底部（替換圖像將被換回的位置）。你可以這樣得到它：
var contentTop = $(".page-content").offset().top;
var contentBottom = contentTop + $(".page-content").outerHeight(true);4.您需要檢查滾動是否在這些位置之間：
if ( ($(this).scrollTop() > contentTop) && ($(this).scrollTop() < contentBottom))
為了使其具有響應(yīng)性（例如，如果在頁面加載后通過調(diào)整窗口大小更改屏幕大小，它將起作用），您還需要將其包含在滾動事件處理程序中。
功能的完整代碼
// get the URL of the image so we can use it to swap back
defaultImgUrl = $(".image-test img").attr("src");
// check the scroll position on the scroll event
$(window).on('scroll', function() {
// get the top and bottom positions pf the page content
var contentTop = $(".page-content").offset().top;
var contentBottom = contentTop + $(".page-content").outerHeight(true);
// check 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);
}
});
工作示例：
// get the URL of the image so we can use it to swap back
defaultImgUrl = $(".image-test img").attr("src");
// check the scroll position on the scroll event
$(window).on('scroll', function() {
// get the top and bottom positions pf the page content
var contentTop = $(".page-content").offset().top;
var contentBottom = contentTop + $(".page-content").outerHeight(true);
// check 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 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>
