sldo_ru
@sldo_ru
Frontend Dev. in Birppl

Как исправить странное поведение при скролле?

Очень странное поведение при скролле:

function () {
      if (window.scrollY >= 200) {
        document.querySelector('.header').style.backgroundColor = 'red'
        document.querySelector('.header').style.padding = '.5rem 1.875rem'
        this.scrollImage = true
      } else {
        document.querySelector('.header').style.padding = '1.25rem 1.875rem'
        this.scrollImage = false
      }


Код работает, но почему-то в одной точке при скролле элемент начинает становится то .5rem padding, то 1.25rem. Также работает и с элементом, у которого меняется видимость. Что может быть связано с этим?
  • Вопрос задан
  • 44 просмотра
Пригласить эксперта
Ответы на вопрос 1
@egowka
Возможно потому, что ты ставишь условие таким образом, что всё время добавляешь padding. Попробуй добавлять только один раз в нужный момент времени.

if (window.scrollY >= 200 && !this.scrollImage) {
        document.querySelector('.header').style.backgroundColor = 'red'
        document.querySelector('.header').style.padding = '.5rem 1.875rem'
        this.scrollImage = true
      } else if (window.scrollY < 200 && this.scrollImage) {
        document.querySelector('.header').style.padding = '1.25rem 1.875rem'
        this.scrollImage = false
      }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы