Измените текст в фиксированном div при прокрутке веб-сайта

Question

Я пытаюсь изменить текст в фиксированном элементе div, когда вы прокручиваете основные элементы div, содержащие изображения. Я попытался выполнить решение в Изменение содержимого div в зависимости от положения прокрутки , но оно не сработало. Вот моя попытка использовать этот метод: http://jsfiddle.net/st6q1Lmo/5/.

Я новичок, поэтому мне сложно писать код с нуля. Должно быть, я что-то делаю не так ... Буду признателен за любую помощь. Спасибо!

Это мой HTML и CSS без JS (http://jsfiddle.net/7tdnw1eb/6/):

ОБНОВЛЕНИЕ: Благодаря руководству, которое мне дал tera_789, я почти получил его на работу. Для первого и третьего div это работает, но для второго контент не будет обновляться в фиксированном div. Я знаю, что это может быть потому, что видео только 90vh и само видео не будет прокручиваться в контейнере ... Однако мне нужно, чтобы оно было 90vh. Как я могу обойти это? jsfiddle.net / 7tdnw1eb / 12

body {
  background-color: #797979;
  color: black;
  font-family: serif;
  font-size: 2vw;
  line-height: 1.1em;
}

#about {
  padding-bottom: 1em;
}

#wrapper {
  max-width: 100vw;
  max-height: 100vh;
  overflow: scroll;
  padding-top: 1em;
  padding-bottom: 1em;
}

.project {
  background-color: transparent;
  width: 100vw;
  height: 100vh;
  position: sticky;
  top: 0;
  padding: 0 2em;
  overflow: scroll;
}

.content__container {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#count {
  color: black;
  width: 20%;
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  padding: 1em 2em 2em 0;
  z-index: 99999999999;
}

img {
  max-width: 100%;
}

<div id="wrapper">

  <div id="count">
    <p>1/3</p>
  </div>

  <div id="about">
    Wassup everyone
  </div>

  <div class="project">
    <div class="content__container">
      <img src="https://www.what-dog.net/Images/faces2/scroll001.jpg">
    </div>
  </div>

  <div class="project">
    <div class="content__container">
      <img src="https://static.boredpanda.com/blog/wp-content/uploads/2017/09/funny-dog-thoughts-tweets-1.jpg">
    </div>
  </div>

  <div class="project">
    <div class="content__container">
      <img src="https://ksrpetcare.com/wp-content/uploads/2017/04/41059-Cute-Yellow-Labrador-puppy-in-play-bow-white-background.jpg">
    </div>
  </div>

</div>

Answer 1

Взгляните на это: Событие прокрутки