Как узнать, что пользователь прокрутил ниже шапки?

Question

есть сложная динамическая шапка. При скролле необходимо, чтобы её часть(средний этаж) ездил за пользователем. Нужно узнать в какой именно момент этот средний этаж пропадает из поля видимости пользователя(высоты экрана). есть идеи? Лучше на чистом JS.

Answer 1

Находим ваш элемент на странице:

const el = document.querySelector("#My_Header");
пишем функцию для нахождения расстояния вашей шапки до верха страницы (т.к. она не прилегает к верху):
```
function offset(el) {
  var rect = el.getBoundingClientRect(),
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return rect.top + scrollTop
}
```
Навешиваете обработчик событий для прокрутки страницы на window, чтоб понимать, когда необходимо закрепить этаж шап
```
window.addEventListener('scroll', function(e) {
    scrollY = window.scrollY; 
    if (scrollY > offset(el)) {
      Ваш код для фиксации шапки (position: fixed и т.д.)
    }
})
```

БЛОГ НА HUSL

Как узнать, что пользователь прокрутил ниже шапки?

Ответы (1 шт):