Форум

Alexprom · #1 (**permalink**) 23.07.2021, 00:08

Доброй ночи ребята!
Ищу липкий блок.
Вчем суть, ищу такой блок который покажется когда скролингом дойдешь до определенного класса, например к кнопке.

Если это невозможно, то может есть рабочий скрипт который отобразит липкий блок спустя N пиксе и скроет на N пикселях от верха?

рони · #2 (**permalink**) 23.07.2021, 07:06

Alexprom,
https://developer.mozilla.org/ru/doc...ectionObserver

Alexprom · #3 (**permalink**) 23.07.2021, 10:19

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

Alexprom,
https://developer.mozilla.org/ru/doc...ectionObserver

Рони, спасибо за ответ, но это не мой уровень, я как и вы но отсталый на 300 лет)))

Я вот нашел рабочий вариант и он мне подходит.
Единственая проблема в том, что он заменяет уже существующий клас, не добавляет.
Если прописать addClass, то класс с (display:none) недобавиться...
Пожет подправите чтоб я смог на мобильной версии иметь другой класс?

function getBodyScrollTop() {
  var offset = self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
  if (offset > 300) {
    document.querySelector('#oct-slide-panel').className = "KT-buy-none";
  }
  if (offset > screen.height - 300) {
    document.querySelector('#oct-slide-panel').className = "KT-buy-fixed";
  }
}
window.addEventListener("scroll", getBodyScrollTop);

рони · #4 (**permalink**) 23.07.2021, 10:34

Alexprom,
удалить или добавить класс элементу, https://learn.javascript.ru/styles-a...me-i-classlist

document.querySelector('#oct-slide-panel').classList.add('KT-buy-none');
 document.querySelector('#oct-slide-panel').classList.remove('KT-buy-none');

рони · #5 (**permalink**) 23.07.2021, 10:36

Alexprom,
сделайте макет html и css,
например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #6 (**permalink**) 23.07.2021, 11:20

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>

Alexprom · #7 (**permalink**) 23.07.2021, 20:14

Большое спасибо, разобрался)

Форум

Справочник

Discord чат

Курсы javascript