Question

我希望滚动显示一部分标题，而顶部消失：

body {
  /* Allows to scroll */
  width: 15em;
}

header {
  width: 100%;
}

header a {
  display: block;
  background-color: red;
}

#title {
  position: sticky;
  top: 0;
}

<body>
  <header>
    <h1>
      <a href="index.html">
        <div id="caption">Some text</div>
        <div id="title">Main title</div>
      </a>
    </h1>
  </header>
  <p>Distinctio ut totam quos aliquam et voluptas delectus vitae. Aut optio inventore repudiandae nemo consequatur dolores impedit. Rerum fuga repellat illum culpa qui aut est qui. Qui deleniti mollitia incidunt deleniti officiis aliquid ipsam. Sed molestiae porro consequatur blanditiis deserunt temporibus. Natus autem veritatis illo totam cupiditate quidem qui.</p>
  <p>Tempore dolor est omnis rem. Reiciendis architecto quisquam dolor. Dolorem minus ea expedita quo sunt. Adipisci totam cum omnis omnis. Voluptas similique amet magnam consequatur consequatur animi et nihil. Sequi tenetur tempora magnam quaerat est voluptatem.</p>
  <p>Magni voluptas et cum. Voluptatum omnis libero odit eligendi. Consequuntur provident fuga qui eveniet similique. Non voluptatem et rerum. Iste corrupti perspiciatis atque.</p>
  <p>Recusandae in est enim. Occaecati optio consequatur atque perferendis veritatis. Est aut cupiditate ea. Corrupti cumque quia accusamus ut perspiciatis qui ea.</p>
  <p>Quisquam rerum voluptas voluptas corrupti quaerat. Tempore totam nemo numquam a modi similique. Veritatis eos nobis laudantium delectus. Laboriosam in incidunt esse quo provident ut necessitatibus consequuntur.</p>
</body>

但是如您所见，这并没有达到预期的效果。我该如何实现？

Answer 1

粘性必须位于h1元素上，并且您考虑使用负的最高价值来实现所需的愿望，但是您需要根据标题的高度找到正确的值

body {
  /* Allows to scroll */
  width: 15em;
}

header {
  position: sticky;
  top: -40px;
}

header a {
  display: block;
  background-color: red;
}

<body>
  <header>
    <h1>
      <a href="index.html">
        <div id="caption">Some text</div>
        <div id="title">Main title</div>
      </a>
    </h1>
  </header>
  <p>Distinctio ut totam quos aliquam et voluptas delectus vitae. Aut optio inventore repudiandae nemo consequatur dolores impedit. Rerum fuga repellat illum culpa qui aut est qui. Qui deleniti mollitia incidunt deleniti officiis aliquid ipsam. Sed molestiae
    porro consequatur blanditiis deserunt temporibus. Natus autem veritatis illo totam cupiditate quidem qui.</p>
  <p>Tempore dolor est omnis rem. Reiciendis architecto quisquam dolor. Dolorem minus ea expedita quo sunt. Adipisci totam cum omnis omnis. Voluptas similique amet magnam consequatur consequatur animi et nihil. Sequi tenetur tempora magnam quaerat est voluptatem.</p>
  <p>Magni voluptas et cum. Voluptatum omnis libero odit eligendi. Consequuntur provident fuga qui eveniet similique. Non voluptatem et rerum. Iste corrupti perspiciatis atque.</p>
  <p>Recusandae in est enim. Occaecati optio consequatur atque perferendis veritatis. Est aut cupiditate ea. Corrupti cumque quia accusamus ut perspiciatis qui ea.</p>
  <p>Quisquam rerum voluptas voluptas corrupti quaerat. Tempore totam nemo numquam a modi similique. Veritatis eos nobis laudantium delectus. Laboriosam in incidunt esse quo provident ut necessitatibus consequuntur.</p>
</body>

Answer 2

从MDN开始：“ 粘性放置的元素将被视为相对放置，直到它超过指定的阈值为止，此时将其视为固定的，直到到达其父对象的边界为止。“
这里它的父级是<a href="index.html">，因此滚动时，#title将与其父级一起向上滚动。

如果您希望#title停留在身体顶部，则需要该身体作为其直接父对象。

在代码段中，我同时使用了position: sticky;和position: -webkit-sticky;，因为Safari need the prefix。

body {
  /* Allows to scroll */
  width: 15em;
}

header {
  width: 100%;
}

header a {
  display: block;
  background-color: red;
}

#title {
  background-color: red;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

<body>
  <header>
    <h1>
      <a href="index.html">
        <div id="caption">Some text</div>
      </a>
    </h1>
  </header>
  <div id="title"><a href="index.html"><h1>Main title</h1></a></div>
  <p>Distinctio ut totam quos aliquam et voluptas delectus vitae. Aut optio inventore repudiandae nemo consequatur dolores impedit. Rerum fuga repellat illum culpa qui aut est qui. Qui deleniti mollitia incidunt deleniti officiis aliquid ipsam. Sed molestiae porro consequatur blanditiis deserunt temporibus. Natus autem veritatis illo totam cupiditate quidem qui.</p>
  <p>Tempore dolor est omnis rem. Reiciendis architecto quisquam dolor. Dolorem minus ea expedita quo sunt. Adipisci totam cum omnis omnis. Voluptas similique amet magnam consequatur consequatur animi et nihil. Sequi tenetur tempora magnam quaerat est voluptatem.</p>
  <p>Magni voluptas et cum. Voluptatum omnis libero odit eligendi. Consequuntur provident fuga qui eveniet similique. Non voluptatem et rerum. Iste corrupti perspiciatis atque.</p>
  <p>Recusandae in est enim. Occaecati optio consequatur atque perferendis veritatis. Est aut cupiditate ea. Corrupti cumque quia accusamus ut perspiciatis qui ea.</p>
  <p>Quisquam rerum voluptas voluptas corrupti quaerat. Tempore totam nemo numquam a modi similique. Veritatis eos nobis laudantium delectus. Laboriosam in incidunt esse quo provident ut necessitatibus consequuntur.</p>
</body>

使用“粘性”制作可收缩的标头

2 个答案: