Показать сообщение отдельно
  #6 (permalink)  
Старый 23.07.2021, 11:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,031

IntersectionObserver toggle
Alexprom,
<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    p{
        height: 500px;
    }
    #oct-slide-panel{
        position: fixed;
        display: none;
    }
    #oct-slide-panel.show{
        display: block;
    }

    </style>

    <script>
document.addEventListener('DOMContentLoaded', function() {
            let panel = document.querySelector('#oct-slide-panel');
            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">вижу кнопу</div>
<p></p>
<button class="btn">кнопа</button>
<p></p>
</body>
</html>
Ответить с цитированием