实现导航栏固定，滚动条下滑一定距离后消失，上划继续出现

实现导航栏固定，滚动条下滑一定距离后消失，上划继续出现

const showHeader = ref(true);


// 获取滚动条的高度
const getScrollTop = () => {
  let scrollTop =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop;
  return scrollTop;
};


const initScroll = () => {
  let initScrollTop = getScrollTop();
  let scrollType = 0; //上滚还是下滚
  window.addEventListener("scroll", () => {
    let currentScrollTop = getScrollTop();
    console.log(currentScrollTop);
    if (currentScrollTop > initScrollTop) {
      // 往下滚
      scrollType = 1;
    } else {
      scrollType = 0;
    }
    initScrollTop = currentScrollTop;


    if (scrollType === 1 && currentScrollTop > 120) {
      showHeader.value = false;
    }else{
      showHeader.value = true;
    }
  });
};


onMounted(() => {
  initScroll();
});