Sveltekit+UnoCSS环境下CSS sticky属性失效的解决方法

问题描述 #

我搭建了一个基于Sveltekit和UnoCSS（使用wind预设）的项目，外层<div>元素设置了h-200vh样式且内容可滚动，<main>元素添加了sticky类，但该粘性布局属性未生效，页面仍正常滚动。相关代码如下：

<!-- +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>

解决方案 #

核心原因 #

CSS position: sticky 生效需要两个关键条件：

• 必须为元素指定至少一个 top/right/bottom/left 偏移属性，否则无法触发粘性定位逻辑。
• 元素的父容器不能设置 overflow: hidden/auto/scroll（除非你明确希望粘性效果相对于该滚动容器生效）。

你的代码中，<main>仅添加了sticky类（对应position: sticky），但未设置任何偏移属性，这是导致粘性失效的直接原因。此外，外层<div>的h-200vh会让滚动行为发生在该容器内部而非<body>，需要根据需求调整滚动上下文。

修复步骤 #

1. 给<main>添加偏移属性：在class中加入top-0（或其他你需要的偏移值，比如top-6），让浏览器知道粘性定位的触发位置。
2. 可选：调整滚动上下文：如果希望粘性效果相对于<body>生效，可移除外层<div>的h-200vh类，改用min-h-screen让内容自然撑开，滚动行为回到<body>上。

修改后的代码示例 #

修改+page.svelte中的<main>标签：

<main class="sticky top-0 flex flex-col justify-center h-screen py-20">

如果要调整滚动上下文，修改+layout.svelte中的外层<div>：

<div
  class="min-h-screen px-6 text-white bg-black md:px-12 lg:px-24 xl:px-48"
>
  <Header />
  <slot />
</div>

内容的提问来源于stack exchange，提问作者user21392777