Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.07.2021, 00:08
Аспирант
Отправить личное сообщение для Alexprom Посмотреть профиль Найти все сообщения от Alexprom
 
Регистрация: 19.09.2018
Сообщений: 38

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

Если это невозможно, то может есть рабочий скрипт который отобразит липкий блок спустя N пиксе и скроет на N пикселях от верха?
Ответить с цитированием
  #2 (permalink)  
Старый 23.07.2021, 07:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,978

Alexprom,
https://developer.mozilla.org/ru/doc...ectionObserver
Ответить с цитированием
  #3 (permalink)  
Старый 23.07.2021, 10:19
Аспирант
Отправить личное сообщение для Alexprom Посмотреть профиль Найти все сообщения от Alexprom
 
Регистрация: 19.09.2018
Сообщений: 38

Сообщение от рони Посмотреть сообщение
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,978

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,978

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #6 (permalink)  
Старый 23.07.2021, 11:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,978

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>
Ответить с цитированием
  #7 (permalink)  
Старый 23.07.2021, 20:14
Аспирант
Отправить личное сообщение для Alexprom Посмотреть профиль Найти все сообщения от Alexprom
 
Регистрация: 19.09.2018
Сообщений: 38

Большое спасибо, разобрался)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обрезка строки до (после) определенного символа gglmgl Общие вопросы Javascript 5 17.12.2012 15:49
Не изменяется DOM после назначения класса css в Chrome khusamov Общие вопросы Javascript 5 22.03.2010 19:45
Вбор числа после определенного символа в строке Jekel Серверные языки и технологии 2 21.03.2010 12:17
Удалить ряд символов перед или после курсора до определенного сивола brd Javascript под браузер 3 30.10.2009 07:20
Как вызвать событие после события определенного в onchange Наталья Events/DOM/Window 2 12.09.2009 12:51