Development of vue3 page ceiling

1. Use js to monitor window scrolling changes

<script setup>
import { onMounted, ref, watch } from "vue";
onMounted(() => {
  window.addEventListener("scroll", scrollToTop);
});
let scrollTop = ref("0");
const scrollToTop = () => {
  // let app = document.querySelector(".app-header");
  // console.log(app.offsetTop);
  // console.log(document.documentElement.scrollTop);
  scrollTop.value = document.documentElement.scrollTop;
};
watch(scrollTop, (newv) => {
  let ghgh = document.querySelector(".app-header-sticky");
  console.log(newv);
  if (newv > 100) {
    ghgh.classList.add("show");
  } else {
    ghgh.classList.remove("show");
  }
});
</script>

Define a variable in advance to store the height of page scrolling, and then use watch to monitor the change of the value, and then add or overflow the class name to the ceiling component box to achieve the ceiling effect

 tips:

 To get the ordinate position of the scroll bar on the current page, use: document.documentElement.scrollTop; instead of: document.body.scrollTop; documentElement corresponds to the html tag, and body corresponds to the body tag

 document.body.scrollTop and document.documentElement.scrollTop have a feature that only one value will take effect at the same time. For example, when document.body.scrollTop can get a value, document.documentElement.scrollTop will always be 0; and vice versa. So, if you want to get the real scrollTop value of the web page, you can do this:

var scrollTop=document.body.scrollTop+document.documentElement.scrollTop;

One of these two values ​​will always be 0, so don't worry about affecting the real scrollTop. A little trick, but useful.

css:

.app-header-sticky {
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
  // 此处为关键样式!!!
  // 状态一：往上平移自身高度 + 完全透明
  transform: translateY(-100%);
  opacity: 0;

  // 状态二：移除平移 + 完全不透明
  &.show {
    transition: all 0.3s linear;
    transform: none;
    opacity: 1;
  }

 2. Use the plug-in to obtain the height of the page volume

Plugin:   vueuse

Install: npm i @vueuse/core

 Search: useScroll method

 use:    

<script setup lang="ts">
import { useScroll } from '@vueuse/core'

const el = ref<HTMLElement | null>(null)
const { x, y, isScrolling, arrivedState, directions } = useScroll(el)
</script>

<template>
  <div ref="el"></div>
</template>

 The el here is the element to obtain the height of the desired volume. Here I write window

<script setup>
import { onMounted, watch } from "vue";
import { useScroll } from "@vueuse/core";
const { y } = useScroll(window);
watch(y, (newValue, oldValue) => {
  let ghgh = document.querySelector(".app-header-sticky");
  if (newValue > 100) {
    ghgh.classList.add("show");
  } else {
    ghgh.classList.remove("show");
  }
});
</script>

extension:

Back to top:

<button @click="fgfg">返回顶部</button>




const fgfg = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

smooth for a smoother return to the top