Здравствуйте!
Искал примеры, но гугл меня явно не понимает...
Ищу липкий блок который покажется только тогда, когда нужный клас скрылся из виду при скролле.
Может у кого-то есть что-то подобное?
Вот нашел пример, но он показывает липкий блок только при подходе к нужному классу.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
p{
height: 500px;
}
#oct-slide-panel-mobile{
position: fixed;
display: none;
}
#oct-slide-panel-mobile.show{
display: block;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
let panel = document.querySelector('#oct-slide-panel-mobile');
const lazyShow = btns => {
btns.forEach(({intersectionRatio}) => {
panel.classList.toggle('show', intersectionRatio < .3);
});
};
let observer = new IntersectionObserver(lazyShow, {
rootMargin: "10px",
threshold: [.3]
});
document.querySelectorAll('.btn').forEach(elem => observer.observe(elem));
});
</script>
</head>
<body>
<div id="oct-slide-panel-mobile">вижу кнопу</div>
<p></p>
<button class="btn">кнопа</button>
<p></p>
</body>
</html>