Здравствуйте. А не подскажите. Можно ли сделать так что бы 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. Сделалал через создание дополнительного элемента. Но может можно без него обойтись?