БЛОГ НА HUSL


Баг при скролле, дергаются блоки при смене фиксированного позиционирования на относительное

Автор вопроса: Дмитрий Ломоновский 

const animItems = document.querySelectorAll('.block-h');
if (animItems.length > 0) {
  window.addEventListener('scroll', animOnScroll);

  function animOnScroll() {
    for (let index = 0; index < animItems.length; index++) {
      const animItem = animItems[index];
      const animItemHeight = animItem.offsetHeight;
      const animItemOffset = offset(animItem).top;
      const animItemOffsetBottom = offset(animItem).top - animItemHeight;
      const animStart = 6;
      let animItemPoint = window.innerHeight - animItemHeight / animStart;
      if (animItemHeight > window.innerHeight) {
        animItemPoint = window.innerHeight - window.innerHeight / animStart;
      }
      if (pageYOffset > ((animItemOffset + 200) - animItemPoint)) {
        animItem.classList.add('basketActive');
      } else {
        animItem.classList.remove('basketActive');
      }
      if (pageYOffset > (animItemOffset + animItemHeight) - animItemPoint) {
        animItem.classList.remove('basketActive');
      }
    }
  }

  function offset(el) {
    const rect = el.getBoundingClientRect(),
      scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
      scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return {
      top: rect.top + scrollTop,
      left: rect.left + scrollLeft
    }
  }
  animOnScroll();
}
.bg {
  width: 100%;
  height: 460px;
  background: rgb(20, 18, 18);
}

.block-1 {
  background: red;
}

.block-2 {
  background: blue;
}

.block-3 {
  background: rgb(255, 0, 136);
}

.block-4 {
  background: rgb(0, 255, 8);
}

.block-5 {
  background: rgb(255, 166, 0);
}

.block-6 {
  background: blue;
}

.block-7 {
  background: rgb(255, 0, 136);
}

.block-8 {
  background: red;
}

.block-9 {
  background: rgb(255, 166, 0);
}

.basket {
  bottom: 0;
  width: 100%;
  height: 100px;
  background: gray;
}

.basketActive .basket {
  position: fixed;
}

.text {
  padding: 40px 0;
  height: 80px;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Скролл</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
</head>

<body>

  <div class="bg"></div>
  <section class="block-h block-1">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      1111111111111111111111111111111111111111111111111111111
    </div>
  </section>
  <section class="block-h block-2">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      2222222222222222222222222222222222222222222222222222222
    </div>
  </section>
  <section class="block-h block-3">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      3333333333333333333333333333333333333333333333333333333
    </div>
  </section>
  <section class="block-h block-4">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      44444444444444444444444444444444444444444444444444444
    </div>
  </section>
  <section class="block-h block-5">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      555555555555555555555555555555555555555555555555555555555
    </div>
  </section>
  <section class="block-h block-6">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      66666666666666666666666666666666666666666666666666666666
    </div>
  </section>
  <section class="block-h block-7">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      777777777777777777777777777777777777777777777777777777
    </div>
  </section>
  <section class="block-h block-8">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      8888888888888888888888888888888888888888888888888888888888
    </div>
  </section>
  <section class="block-h block-9">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      999999999999999999999999999999999999999999999999999999999999
    </div>
  </section>

</body>

</html>


Источник

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

Автор решения: Дмитрий Ломоновский 

const animItems = document.querySelectorAll('.block-h');
if (animItems.length > 0) {
  window.addEventListener('scroll', animOnScroll);
  function animOnScroll() {
    for (let index = 0; index < animItems.length; index++) {
      const animItem = animItems[index];
      const animItemHeight = animItem.offsetHeight;
      const animItemOffset = offset(animItem).top;
      const animItemOffsetBottom = animItem.offsetHeight - 50;
      const animStart = 6;
      let animItemPoint = window.innerHeight - animItemHeight / animStart;
      if (animItemHeight > window.innerHeight) {
        animItemPoint = window.innerHeight - window.innerHeight / animStart;
      }
      if (pageYOffset > ((animItemOffset + 200) - animItemPoint)) {
        animItem.classList.add('basketActive');
      } else {
        animItem.classList.remove('basketActive');
      }
      if (pageYOffset > (animItemOffset + animItemOffsetBottom) - animItemPoint) {
        animItem.classList.add('basketActiveBottom');
      } else {
        animItem.classList.remove('basketActiveBottom');
      }

    }
  }
  function offset(el) {
    const rect = el.getBoundingClientRect(),
      scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
      scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return {
      top: rect.top + scrollTop,
      left: rect.left + scrollLeft
    }
  }
  animOnScroll();
}
.bg {
  width: 100%;
  height: 460px;
  background: rgb(20, 18, 18);
}

.block-h {
  position: relative;
}

.block-1 {
  background: red;
}

.block-2 {
  background: blue;
}

.block-3 {
  background: rgb(255, 0, 136);
}

.block-4 {
  background: rgb(0, 255, 8);
}

.block-5 {
  background: rgb(255, 166, 0);
}

.block-6 {
  background: blue;
}

.block-7 {
  background: rgb(255, 0, 136);
}

.block-8 {
  background: red;
}

.block-9 {
  background: rgb(255, 166, 0);
}

.basket {
  bottom: 0;
  width: 100%;
  height: 100px;
  background: gray;
}

.basketActive .basket {
  position: fixed;
}

.basketActiveBottom .basket {
  position: absolute;
}

.text {
  padding: 40px 0;
  height: 80px;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Скролл</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
</head>

<body>

  <div class="bg"></div>
  <section class="block-h block-1">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      1111111111111111111111111111111111111111111111111111111
    </div>
  </section>
  <section class="block-h block-2">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      2222222222222222222222222222222222222222222222222222222
    </div>
  </section>
  <section class="block-h block-3">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      3333333333333333333333333333333333333333333333333333333
    </div>
  </section>
  <section class="block-h block-4">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      44444444444444444444444444444444444444444444444444444
    </div>
  </section>
  <section class="block-h block-5">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      555555555555555555555555555555555555555555555555555555555
    </div>
  </section>
  <section class="block-h block-6">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      66666666666666666666666666666666666666666666666666666666
    </div>
  </section>
  <section class="block-h block-7">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      777777777777777777777777777777777777777777777777777777
    </div>
  </section>
  <section class="block-h block-8">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      8888888888888888888888888888888888888888888888888888888888
    </div>
  </section>
  <section class="block-h block-9">
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="text">fhiuehfe</div>
    <div class="basket">
      999999999999999999999999999999999999999999999999999999999999
    </div>
  </section>

</body>

</html>

Баг был из-за перехода с фиксированного позиционирования (fixed) на относительное (relative) и обратно. Сменил относительное позиционирование на абсолютное и добавил отдельное условие и класс, которое будет менять позицию элемента в нужном месте.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.