How to smooth the transition point when scrolling?

Question

JavaScript

There is a header, when scrolling down more than 80px, a class is added to the header using Vue, due to which it changes using css. But the transition occurs with jerking, especially if you take a scroll with the mouse and scroll by about 80px yourself, then there is a permanent jerking (trembling) of the header. How to smooth this transition point?
Here is the code if needed.

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

});

Answer 1

It is not entirely clear what twitching and trembling of the header means.
If you mean that the page jumps up when the header is fixed, then this is due to the fact that it changes its position from static to fixed, as a result of which a hole appears in the header equal to its height, and the entire page jumps up by those pixels.
Resp. to prevent this jump, you need to fill this empty space with something.
At the moment when the header changes position to fixed, do:
1 - Add an empty block equal to the height of the header.
2 - Add an indent to the entire page from the top equal to the height of the header.