vue中指令实现顶部的隐藏与显示时只有往上划的时候才出现顶部？

为什么我用指令写得实现顶部的隐藏与显示，超过隐藏的距离会发生下划的时候顶部没有出现，但上划的时候（没到隐藏的距离）又可以出现顶部了呢

Vue.directive('scroll', {
  inserted (el) {
    el.style.display = 'none'
    window.onscroll = () => {
      if ((document.documentElement.scrollTop || document.body.scrollTop) > 50) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  },
  unbind () {
    window.onscroll = null
  }
})

看看滚动的时候，这里的值