用“粘性”制作一个可收缩的标题答案

【问题标题】：Make a shrinkable header with "sticky"用“粘性”制作一个可收缩的标题
【发布时间】：2019-08-06 21:54:28
【问题描述】：

我想在顶部消失时将标题的一部分粘贴在滚动条上：

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>

但正如您所见，这并没有按预期工作。我怎样才能做到这一点？

【问题讨论】：

你想让主标题变粘吗？
"Position: sticky;" not Working CSS and HTML的可能重复
@AmareshSM 完全正确
medium.com/@elad/…

标签： html css sticky

【解决方案1】：

sticky 需要在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>

【讨论】：

@FrenchBoiethios 不，那个副本不相关，
IIUW，sticky 只对父级起作用，所以如果“body”不是父级，我不能让一些东西粘在页面顶部，不是吗？
sticky 以其父级为边界。所以元素只能粘在父区域内，但滚动可以在上层元素内。这里的标头不是唯一的元素在主体内，因此与标头内部的元素不同，有一些空间可以粘贴。检查这里以获得更详细的解释和示例：stackoverflow.com/a/54610362/8620333
@FrenchBoiethios 如果您想了解更多相关问题：stackoverflow.com/a/55601002/8620333 / stackoverflow.com/a/52997848/8620333

【解决方案2】：

来自MDN：“粘性定位元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定，直到它到达其父元素的边界。”
这里它的父级是<a href="index.html">，所以当你滚动时，#title 会和它的父级一起向上滚动。

如果您希望 #title 贴在主体的顶部，则需要主体作为其直接父级。

在 sn-p 中，我同时使用了 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>

【讨论】：

所以当你滚动时，#title 将覆盖 #caption --> title 永远不会覆盖标题，因为它在底部，而粘性被定义为顶部跨度>
好的，谢谢！ h1 内部没有滚动...所以没有粘在它的顶部。