【vue3】实现滚动吸附功能

LayoutHome.vue

<template>
  <!-- <div class="container1" v-show="y > 78"> -->
  <div class="container1">
    <AppHeaderNav />
    <div class="left">
      <RouterLink to="/">品牌</RouterLink>
      <RouterLink to="/">专题</RouterLink>
    </div>
  </div>

  <div class="container3">
    <AppHeaderNav />
    <div class="left">
      <RouterLink to="/">品牌</RouterLink>
      <RouterLink to="/">专题</RouterLink>
    </div>
  </div>

  <article>
    <section>
      <h4>网曝王宝强殴打马蓉</h4>
      <content>
        <p>12月2日，有网友爆料称...</p>
      </content>
      <footer>网友评论：...</footer>
    </section>
    <section>
      <h4>知情人爆料称马蓉闯入王宝强家拿剪刀对峙</h4>
      <content>
        <p>...</p>
      </content>
      <footer>网友评论：...</footer>
    </section>
    ...
  </article>

  <ul id="example-2">
    <li v-for="n in 50">adfsafd {{ n }} {{ x }} {{ y }} <br /></li>
  </ul>

  <div class="container4">
    <AppHeaderNav />
    <div class="left">
      <RouterLink to="/">品牌</RouterLink>
      <RouterLink to="/">专题</RouterLink>
    </div>
  </div>

  <zxx-scroll>
    <p>
      最近在自己博客<a href="https://www.zhangxinxu.com/life/">“生活与创造”</a
      >栏目那里开始连载<a
        href="https://www.zhangxinxu.com/life/category/light-novel/"
        >轻小说</a
      >，题目是“身为前端开发的我成为了一个渔民”。
    </p>
    <p>
      跟绝大多数的小说不同，在这部小说里面，直接采用第一人称写法，会有一些挑战，但也会带来一些非常有趣的展现形式。
    </p>
    <p>
      这部连载轻小说采用月更方式，利用碎片时间完成，每次更新5000~6000字之间，预计两年完结。
    </p>
    <p>
      欢迎大家支持，如果觉得写的还不错啊，可以疯狂安利给周围小伙伴，目前已经有了两次更新，可以<a
        href="https://www.zhangxinxu.com/life/fisher-1/"
        >点击这里</a
      >开始阅读。
    </p>
  </zxx-scroll>

  <ul id="example-2">
    <li v-for="n in 50">adfsafd {{ n }} {{ x }} {{ y }} <br /></li>
  </ul>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import AppHeaderNav from "@/components/LayoutHeader.vue";
import { useWindowScroll } from "@vueuse/core";

const pShow = ref(true);
const { x, y } = useWindowScroll();
function fun() {
  pShow.value = !pShow.value;
}

const pShow1 = computed(() => {
  if (y.value > 78) {
    console.log(">78:", y.value);
    return true;
  } else {
    console.log("<78:", y.value);
    return false;
  }
});
</script>
<style>
.container3 {
  position: sticky;
  top: 0px;
  height: 78px;
  background-color: rgb(13, 129, 230);
}
.container1 {
  top: 0px;
  height: 78px;
  background-color: rgb(189, 211, 231);
}

.container4 {
  position: sticky;
  top: 80px;
  height: 78px;
  background-color: rgb(189, 211, 231);
}

article {
  max-width: 600px;
  margin: 1em auto;
}
article h4,
article footer {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
}
article h4 {
  margin: 2em 0 0;
  background-color: #333;
  color: #fff;
  padding: 10px;
  top: 0;
  z-index: 1;
}
article content {
  display: block;
  background-color: #ffffe0;
  position: relative;
  padding: 1px 10px;
}
article footer {
  background-color: #f0f3f9;
  padding: 10px;
  bottom: 50vh;
  z-index: -1;
}

zxx-scroll {
  position: sticky;
  top: 180px;
  bottom: 180px;
  display: block;
  width: 280px;
  height: 200px;
  padding: 0.5em 1em;
  margin: 5em auto;
  border: solid deepskyblue;
  overflow: auto;
  overscroll-behavior: contain;
  -ms-scroll-chaining: contain;
}
</style>

LayoutHeader.vue

<template>
  <header>
    <slot>header</slot>
  </header>
</template>

效果