如何在滚动时到达不同的 div 元素后更改导航图像

Question

我在导航中有一张图片（我们称之为 pic1），一旦我到达页面内容 div 的顶部就需要更改为 pic2，但是当我到达页脚时它需要改回 pic 1 并重复，所以如果我向上滚动到页面内容，它将再次转到图片 2，等等。

我尝试做类似下面的事情，但无法让它工作，我怎样才能让它工作？

var scrollContent = $("#content").offset().top;

var scrollHero = $("#hero").offset().top;

var scrollPos = $(document).scrollTop();

if (scrollPos > scrollContent) {

    $(".image-test").css({

        "background-image": "url('')"

    });

}  else if(scrollPos < scrollContent) {

    $(".image-test").css({

        "background-image": "url('')"

    });

Answer 1

您尝试使用的 jQyery 代码存在一些问题：1.你只是在页面加载时检查滚动位置 - 你需要不断检查滚动事件：$(window).on('scroll',&nbsp;function(&nbsp;/*&nbsp;handler&nbsp;function&nbsp;*/));2.您试图通过 CSS 更改图像，但图像未使用 CSS 显示。相反，您可以像这样更改元素src的：img$(".image-test&nbsp;img").attr("src",&nbsp;imgUrl);3.您没有检查页面内容元素的底部（替换图像将被换回的位置）。你可以这样得到它：var&nbsp;contentTop&nbsp;=&nbsp;$(".page-content").offset().top; var&nbsp;contentBottom&nbsp;=&nbsp;contentTop&nbsp;+&nbsp;$(".page-content").outerHeight(true);4.您需要检查滚动是否在这些位置之间：if&nbsp;(&nbsp;($(this).scrollTop()&nbsp;>&nbsp;contentTop)&nbsp;&&&nbsp;($(this).scrollTop()&nbsp;<&nbsp;contentBottom))为了使其具有响应性（例如，如果在页面加载后通过调整窗口大小更改屏幕大小，它将起作用），您还需要将其包含在滚动事件处理程序中。功能的完整代码// get the URL of the image so we can use it to swap backdefaultImgUrl =&nbsp; $(".image-test img").attr("src");// check the scroll position on the scroll event$(window).on('scroll', function() {&nbsp; // get the top and bottom positions pf the page content&nbsp; var contentTop = $(".page-content").offset().top;&nbsp; var contentBottom = contentTop + $(".page-content").outerHeight(true);&nbsp; // check if the scroll position is within the page content&nbsp;&nbsp; if (($(this).scrollTop() > contentTop) && ($(this).scrollTop() < contentBottom)) {&nbsp; &nbsp; // change the image url&nbsp; &nbsp; $(".image-test img").attr("src", "https://lorempixel.com/output/nature-q-c-100-50-2.jpg");&nbsp; } else {&nbsp; &nbsp; $(".image-test img").attr("src", defaultImgUrl);&nbsp; }&nbsp;&nbsp;});工作示例：// get the URL of the image so we can use it to swap backdefaultImgUrl = $(".image-test img").attr("src");// check the scroll position on the scroll event$(window).on('scroll', function() {&nbsp; // get the top and bottom positions pf the page content&nbsp; var contentTop = $(".page-content").offset().top;&nbsp; var contentBottom = contentTop + $(".page-content").outerHeight(true);&nbsp; // check if the scroll position is within the page content&nbsp;&nbsp; if (($(this).scrollTop() > contentTop) && ($(this).scrollTop() < contentBottom)) {&nbsp; &nbsp; // change the image url&nbsp; &nbsp; $(".image-test img").attr("src", "https://lorempixel.com/output/nature-q-c-100-50-2.jpg");&nbsp; } else {&nbsp; &nbsp; $(".image-test img").attr("src", defaultImgUrl);&nbsp; }});.section1,.section2,.page-content {&nbsp; height: 100vh;}.section1 {&nbsp; background-color: green;&nbsp; padding-top: 50px;}.section2 {&nbsp; background-color: red;}nav {&nbsp; height: 50px;&nbsp; background-color: grey;&nbsp; position: fixed;&nbsp; width: 100%;&nbsp; display: flex;}.image-test img {&nbsp; width: 100px;&nbsp; height: 50px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><nav>&nbsp; <div class="image-test">&nbsp; &nbsp; <img src="https://lorempixel.com/output/nature-q-c-100-50-5.jpg" alt="">&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <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>&nbsp; </div></nav><div class="section1" id="hero">&nbsp; <h1>Hero</h1></div><div class="page-content">&nbsp; <h1>Page Content</h1></div><div class="section2">&nbsp; <h1>Footer</h1></div>