为什么CSS sticky不起作用(Sveltekit + UnoCSS)?

vd2z7a6w  于 2023-05-08  发布在  其他
关注(0)|答案(1)|浏览(201)

我有一个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似乎没有效果,页面滚动正常。我该怎么解决这个问题?

n9vozmp4

n9vozmp41#

position: sticky;需要设置topbottomrightleft之一。如果您希望向下滚动时它粘在顶部,请设置top: 0;

相关问题