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;
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>
效果