Анимация смены контента при скролле

Question

window.addEventListener('scroll', () => {
  let scrollDistance = window.scrollY;

  if (window.innerWidth > 768) {
    document.querySelectorAll('.section1').forEach((el, i) => {
      if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
        document.querySelectorAll('.nav a').forEach((el) => {
          if (el.classList.contains('active', 'fadeInLeft', 'animated')) {
            el.classList.remove('active', 'fadeInLeft', 'animated');
          }
        });

        document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active', 'fadeInLeft', 'animated');
      }
    });
  }
});

body {
  background: gray;
  padding: 100px;
}

.block-2 {
  display: flex;
  flex-direction: row;
  background: white;
  width: 100%;
  padding: 50px;
  height: auto;
}

.section-left {
  position: sticky;
  top: 10px;
  height: 300px;
  /* background: gray; */
  width: 100%;
}

.section-right {
  background: blue;
  width: 100%;
}

.wrap {
  margin: 10px;
  background: red;
}

.content {
  height: 500px;
}

.footer {
  width: 100%;
  height: 700px;
  background: red;
}

.nav {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  background-color: white;
  /*     padding: 20px;
*/
}

.nav ul {
  display: flex;
  list-style-type: none;
  flex-direction: column;
  padding: 0;
}

.nav a {
  display: flex !important;
  text-decoration: none;
  color: black !important;
  display: inline-block;
  /*     margin-right: 25px !important;
 */
}

@media screen and (max-width: 1024px) {}

.subtitle {
  opacity: 0;
}

.active {
  opacity: 1;
}

.content1 {
  position: absolute;
  background-color: red;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}

.content2 {
  position: absolute;
  background-color: gray;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}

.content3 {
  position: absolute;
  background-color: green;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}

.content4 {
  position: absolute;
  background-color: blue;
  /*opacity: 0;*/
  width: 100%;
  height: 300px;
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
}

<body>


  <div class="block-2">
    <div class="section-left">
      <nav class="nav">
        <ul>

          <li>
            <a href="" class="active subtitle">
              <div class="content1">
                <h1>O1</h1>
              </div>
            </a>
          </li>

          <li>
            <a href="" class="subtitle">
              <div class="content2">
                <h1>O2</h1>
              </div>
            </a>
          </li>

          <li>
            <a href="" class="subtitle">
              <div class="content3">
                <h1>O3</h1>
              </div>
            </a>
          </li>

          <li>
            <a href="" class="subtitle">
              <div class="content4">
                <h1>O4</h1>
              </div>
            </a>
          </li>



        </ul>
      </nav>
    </div>
    <div class="section-right">
      <div class="section1 wrap">
        <div class="content">asdf</div>
      </div>
      <div class="wrap section1 ">
        <div class="content">asdf</div>
      </div>
      <div class="wrap section1">
        <div class="content">asdf</div>
      </div>
      <div class="wrap section1">
        <div class="content">asdf</div>
      </div>
    </div>
  </div>
  <div class="footer"></div>
</body>

Есть небольшой скрипт, который при скролле должен меняет контент. Я применял его раньше для подсветки пунктов бокового меню при сколле, но решил применить для этой задачи. Не уверен, что он подходит для этого, но задачу он свою выполняет и ничего подходящего и простого на чистом js в инете не нашёл. Но кроме смены контента, я хотел навесить ещё дополнительный эффект (.fadeInLeft, .animated) при помощи того же скрипта добавляя кроме .active ещё .fadeInLeft, .animated. Почти всё получилось). Но эффект начинает срабатывать постоянно при скролле не достигнув .section1 следующего элемента. Я не знаю, пошёл ли я правильным путём, но хотелось как-то попроще. Прошу помочь разобраться знатоков js.

БЛОГ НА HUSL

Анимация смены контента при скролле

Ответы (0 шт):