Показать сообщение отдельно
  #4 (permalink)  
Старый 01.10.2021, 18:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,138

когда элемент скрыт
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>
Ответить с цитированием