Липкий блок когда другой клас скрылся из виду
Здравствуйте!
Искал примеры, но гугл меня явно не понимает... Ищу липкий блок который покажется только тогда, когда нужный клас скрылся из виду при скролле. Может у кого-то есть что-то подобное? Вот нашел пример, но он показывает липкий блок только при подходе к нужному классу.
<!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>
|
Alexprom,
строка 39 исправить селектор, строка 26 повернуть знак сравнения и будет вам счастье, и run добавьте в [html run] |
Цитата:
|
когда элемент скрыт
Alexprom,
что не так?
<!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 <= .1);
});
};
let observer = new IntersectionObserver(lazyShow, {
rootMargin: "10px",
threshold: [.1]
});
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>
|
Alexprom,
или совсем скрыт )))
document.addEventListener('DOMContentLoaded', function() {
let panel = document.querySelector('#oct-slide-panel-mobile');
const lazyShow = btns => {
btns.forEach(({intersectionRatio}) => {
panel.classList.toggle('show', intersectionRatio == 0);
});
};
let observer = new IntersectionObserver(lazyShow, {
rootMargin: "0px",
threshold: [0]
});
document.querySelectorAll('.btn').forEach(elem => observer.observe(elem));
});
|
Рони, большое вам спасибо!
|
| Часовой пояс GMT +3, время: 14:11. |