Как зафиксировать кнопку снизу экрана так, чтобы при прокрутке вниз до нахождения самой кнопки, она откреплялась? Position: sticky - не получается

Рейтинг: 0Ответов: 1Опубликовано: 19.01.2023

мне нужно сделать в телефонной версии прикрепленную кнопку снизу экрана, но после прокрутки до нахождения той кнопки, чтобы она оставалась в своем же блоке, то-есть откреплялась

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1

Можно попробовать использовать Intersection Observer для этого. Он позволяет отслеживать наложение элементов друг на друга и в том числе смотреть, показался/скрылся ли элемент на экране.

Вот тут подробнее: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Пример с кнопкой может быть таким:

const button = document.querySelector(".button");
const container = document.querySelector(".container");

const FIXED_CLASS_NAME = "button_fixed";

function handleButtonInterSection(entries) {
  entries.forEach((entry) => {
      if (entry.isIntersecting) {
        button.classList.remove(FIXED_CLASS_NAME);
      } else {
        button.classList.add(FIXED_CLASS_NAME);
      }
    
  });
}

const intersectionObserver = new IntersectionObserver(
  handleButtonInterSection,
  {
    threshold: 0
  }
);

intersectionObserver.observe(container);
.button_fixed {
  position: fixed;
  bottom: 10px;
  left: 10px;
}
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>

<div class="container">
  <button class="button">button</button>
</div>

<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>
<p class="text">text</p>