我有一个Sveltekit项目设置与UnoCSS,使用wind
预设。下面是代码的一瞥:
<!-- +layout.svelte -->
<script lang="ts">
import 'uno.css';
import '@unocss/reset/tailwind-compat.css';
import '@fontsource/inter/400.css';
import '@fontsource/inter/500.css';
import '@fontsource/inter/600.css';
import '../app.css';
import Header from '$lib/Header.svelte';
</script>
<div
class="min-h-screen px-6 text-white bg-black md:px-12 lg:px-24 xl:px-48 h-200vh"
>
<Header />
<slot />
</div>
<!-- +page.svelte -->
<main class="sticky flex flex-col justify-center h-screen py-20">
<h1 class="text-9xl font-500 ui-head mt-1/17">
I'm a <span class="ui-head">fullstack software engineer</span>,
<span class="ui-head">musician</span>, &
<span class="ui-head">minecrafter</span>.
</h1>
<p class="pb-4 mt-auto text-lg font-500 ui-head text-neutral-400">
Keep Scrolling
</p>
<a
href="#software-engineer"
class="hidden gap-3 p-4 mt-auto text-black bg-white rounded-full hover:flex group w-fit"
>
<svg
fill="none"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
class="w-1.8rem h-1.8rem"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"
/>
</svg>
</a>
</main>
<!-- Header.svelte -->
<header class="fixed z-50 flex items-center justify-between py-6 w-1467px bg-black bg-opacity-96%">
<a href="/" class="text-1.3rem font-500 ui-head group"
>quantasium<span class="absolute hidden text-neutral-300 group-hover:inline"
>#0017</span
></a
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6.5 h-6.5 text-white cursor-pointer"
viewBox="0 0 16 16"
><path
fill="currentColor"
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
/></svg
>
</header>
总体<div></div>
具有h-200vh
样式,并显示溢出。<main></main>
元素是sticky
。但是sticky
似乎没有效果,页面滚动正常。我该怎么解决这个问题?
1条答案
按热度按时间n9vozmp41#
position: sticky;
需要设置top
、bottom
、right
或left
之一。如果您希望向下滚动时它粘在顶部,请设置top: 0;