Блог

У меня есть изображение в навигаторе (назовем его pic1), которое необходимо изменить на pic2, как только я дойду до верхней части раздела содержимого моей страницы, но когда я дойду до нижнего колонтитула, его нужно изменить обратно на рис. 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('')"
    });
  

Вот моя ссылка на codepen

Есть несколько проблем с кодом jQyery, который вы пытаетесь использовать:

1. Вы проверяете положение прокрутки только при загрузке страницы — вам нужно постоянно проверять внутри события прокрутки:

 $(window).on('scroll', function( /* handler function */));
  

2. Вы пытаетесь изменить изображение с помощью CSS, но изображение не отображается с помощью CSS. Вместо этого вы можете изменить src img элемент следующим образом:

 $(".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) amp;amp; ($(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) amp;amp; ($(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) amp;amp; ($(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>