Можно как то оптимизировать код?

Question

[wakenbyWork]

В общем есть нижнее меню (поиск и кнопока фильтра), которое нужно фиксировать:



Написал такую функцию:

function fixed () {
  const headerBottomMobile = document.querySelector('.header-bottom-mobile')
  const header = document.querySelector('.header')

  window.addEventListener('scroll', event => {
    const valueScroll = window.pageYOffset
    const infoBox = headerBottomMobile.getBoundingClientRect()

    if (infoBox.top < 0) {
      header.style.paddingBottom = `${infoBox.height}px`
      headerBottomMobile.classList.add('header-bottom-mobile--fixed')
    }

    if (valueScroll < infoBox.height) {
      header.style.paddingBottom = ''
      headerBottomMobile.classList.remove('header-bottom-mobile--fixed')
    }
  })
}

.header-bottom-mobile {
  &--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }
}

Работает, но при скролле есть задержка фиксации, мини скачек. Есть ли готовый плагин на чистом js? Чтобы все работало плавно))

Comments

[Rsa97]

А position: sticky не подойдёт? Обязательно JS?

[wakenbyWork]

Rsa97, Подошел все таки. Спасибо!

Answer 1

[Дмитрий Беляев]

https://developer.mozilla.org/ru/docs/Web/CSS/posi...

Работает, но при скролле есть задержка фиксации, мини скачек

Потому что не нужно делать на JS то что умеет CSS

Ну и в крайнем случае, для таких вещей есть IntersectionObserver