Как сгладить точку перехода при скролле?

Question

[danilr]

Есть хедер, при скролле вниз больше чем на 80px -хедеру добавляется класс с помощью Vue, из-за которого он меняется с помощью css. Но переход происходит с дерганьем, особенно если мышкой взять скролл и прокрутить самому примерно на 80px, то происходит перманентное дергание(дрожит) хедера. Как сгладить эту точку перехода?
Вот код, если нужен.

Vue.directive('scroll', {
    inserted: function (el, binding) {
      let f = function (evt) {
        if (binding.value(evt, el)) {
          window.removeEventListener('scroll', f)
        }
      }
      window.addEventListener('scroll', f)
    }
  })

new Vue({
    el: root,
    data:{
        isStickyHeader: window.scrollY > 70? true : false
    },
    methods:{
        handleScroll(evt, el) {
            if (window.scrollY > 80) {
              this.isStickyHeader = true
            }
            else{
                this.isStickyHeader = false
            }
        }
    },

});

Comments

[WapSter]

transition

Answer 1

[Александр Суханов]

Не совсем понятно что значит дерганье и дрожит хедер.

Если вы имеете ввиду, что страница прыгает вверх, в момент когда фиксируется хедер, то это происходит из-за того, что он меняет позицию со статика на фиксед, в результате чего в шапке появляется дыра равная его высоте, и вся страница прыгает вверх на эти пиксели.

Соотв. чтобы не происходил этот прыжок, нужно заполнить чем то это пустое пространство.
В момент когда хедер меняет положение на фиксед сделать:
1 - Добавить пустой блок равный высоте хедера.
2 - Добавить отступ всей странице сверху равный высоте хедера.