如何在滚动时到达不同的 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', function( /* handler function */));

2.您正在尝试通过 CSS 更改图像，但图像未使用 CSS 显示。 相反，您可以像这样更改img元素的src ：

$(".image-test img").attr("src", imgUrl);

3.您没有检查页面内容元素的底部（替换图像要换回的位置）。 你可以这样得到它：

var contentTop = $(".page-content").offset().top;
var contentBottom = contentTop + $(".page-content").outerHeight(true);

4.您需要检查滚动是否在这些位置之间：

if ( ($(this).scrollTop() > contentTop) && ($(this).scrollTop() < contentBottom)) 

为了使其具有响应性（例如，如果在页面加载后通过调整窗口大小来更改屏幕大小，则它会起作用）您还需要将其包含在滚动事件处理程序中。

函数的完整代码

// 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-qc-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-qc-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>