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

Question

[sldo_ru]

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

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. Также работает и с элементом, у которого меняется видимость. Что может быть связано с этим?

Answer 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
      }