Форум

Alexprom · #1 (**permalink**) 01.10.2021, 16:52

Здравствуйте!
Искал примеры, но гугл меня явно не понимает...
Ищу липкий блок который покажется только тогда, когда нужный клас скрылся из виду при скролле.
Может у кого-то есть что-то подобное?

Вот нашел пример, но он показывает липкий блок только при подходе к нужному классу.

<!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>

рони · #2 (**permalink**) 01.10.2021, 17:22

Alexprom,
строка 39 исправить селектор, строка 26 повернуть знак сравнения и будет вам счастье, и run добавьте в [html run]

Alexprom · #3 (**permalink**) 01.10.2021, 18:47

Сообщение от рони

Alexprom,
строка 39 исправить селектор, строка 26 повернуть знак сравнения и будет вам счастье, и run добавьте в [html run]

Что-то неправильно работает

рони · #4 (**permalink**) 01.10.2021, 18:48

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>

рони · #5 (**permalink**) 01.10.2021, 18:51

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));
       });

Alexprom · #6 (**permalink**) 01.10.2021, 21:29

Рони, большое вам спасибо!

Форум

Справочник

Discord чат

Курсы javascript