时间戳

首页 > 解决方案 > 用“粘性”制作一个可收缩的标题

html - 用“粘性”制作一个可收缩的标题

问题描述

我想让我的标题的一部分粘在滚动上，而顶部消失：

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>

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

标签： htmlcsssticky

解决方案

粘性需要在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>

推荐阅读