IntersectionObserver при заданой видимости объекта?

Здравствуйте. А не подскажите. Можно ли сделать так что бы IntersectionObserver срабатывал когда целевой объект видно на 50px (в примере на белой линии). Есть свойство threshold но там модно задать в %. А негативный margin не работает.



<main></main>
<footer id="footer"></footer>


main {
 height: 1000px;
 background-color: green;
}

footer {
 height: 300px;
 background-color: blue;
 position: relative;
}

footer::before {
 content: '';
 position: absolute;
 top: 50px;
 left: 0;
 width: 100%;
 height: 1px;
 background-color: white;
}

.active {
 background-color: #333;
}


const target = document.getElementById('footer');  

const options = {
    rootMargin: '-50px 0px 0px 0px'
  }
  const callback = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
       target.classList.add('active');
       console.log('active');
      } else {
         target.classList.remove('active');
       console.log('deactive');
      }
     });
  };
  const observer = new IntersectionObserver(callback, options);
 
  observer.observe(target);


Спасибо.

P.S. Сделалал через создание дополнительного элемента. Но может можно без него обойтись?
  • Вопрос задан
  • 39 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы