滚动时固定标题

Question

试图弄清楚如何在将割台设置为固定位置时补偿高度。请注意，“标题”包含top_bar和导航。在代码片段中添加了一些不透明度，以提高可见性。

我尝试过的：

为block_1和block_2添加了空白边距：180像素。

结果：

block_1和block_2中的文本都位于页面顶部，将其自身定位为堆叠在标题下面。

想要的结果：

block_1和block_2永远不要将其文本堆积在标题下。

.wrapper {
  display: grid;
  grid-template:
  "headers" 180px
  "content" 2000px
  / 1fr;
}

.headers {
  display: grid;
  grid-template:
  "top_bar" 100px
  "navigation" 80px
  / 1fr;
}

.content {
  display: grid;
  grid-template:
  "block_1" 1200px
  "block_2" 1200px
  / 1fr;
}

.headers {
  grid-area: headers;
  position: fixed;
  width: 100%;
  opacity: 0.5;
}

.top_bar {
  grid-area: top_bar;
  background-color: black;
  color: white;
  padding: 10px 0 0 10px;
  font-size: 150%;
}

.navigation {
  grid-area: navigation;
  padding: 10px 0 0 10px;
  background-color: lightgrey;
}

.content {
  grid-area: content;
  background-color: pink;
}

.block_1 {
  grid-area: block_1;
  margin-top: 180px;
}

.block_2 {
  grid-area: block_2;
  margin-top: 180px;
}

  <div class="wrapper">

    <div class="headers">

      <div class="top_bar">Header</div>

      <div class="navigation">
        <li><a href="#block_1">Block_1</a></li>
        <li><a href="#block_2">Block_2</a></li>
      </div>

    </div>

    <div class="content">

      <div class="block_1" id="block_1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse repellendus eaque, commodi ea quisquam illum aperiam libero repudiandae, ex laboriosam sunt aspernatur voluptatum voluptate laborum recusandae. Recusandae perspiciatis molestiae dolorem dolore deleniti quisquam accusantium obcaecati. Deserunt illo nisi obcaecati facere ex illum hic consequatur? Repudiandae quod alias asperiores quas exercitationem officiis et nulla consequatur deserunt modi possimus veritatis minus vitae, veniam, iste ducimus sunt reiciendis saepe rerum? Quidem et atque ducimus eos cum, repudiandae, distinctio facere dignissimos fugiat voluptatibus, quae quam. Magni unde, delectus placeat commodi similique ipsam obcaecati iste laboriosam, autem numquam impedit explicabo omnis quo consequuntur tenetur doloribus error eveniet accusamus dolorem, quibusdam non reprehenderit! Unde illum sequi minima accusamus, iure, magni ipsam illo eius vitae, aut error voluptatem autem harum. Ea possimus autem numquam suscipit quasi facere similique quas, veritatis, at officiis neque odio consequuntur quia esse pariatur alias necessitatibus mollitia laboriosam, voluptas nam amet beatae eius! Cupiditate facere voluptatibus minus voluptas suscipit debitis, quae illo officiis enim saepe placeat rerum ut, sapiente dolore deleniti possimus, doloribus animi quo porro sint? Possimus natus laboriosam vel quas et. Voluptatem dolor a omnis neque, praesentium quas voluptates laudantium molestiae aliquam blanditiis esse natus nostrum deleniti quae, corporis delectus aliquid maiores sit et fuga atque odio. Placeat dicta esse, aspernatur dignissimos molestias hic facere consectetur quia veniam ratione iusto cupiditate dolorum suscipit non neque in magni dolorem nam odit perferendis similique labore! Doloribus et officia ad sed aspernatur minima quo quod omnis! Adipisci consequuntur, impedit in vel ratione, repellat dolor cupiditate. Quod nobis, dicta cumque eius illum. Sed eius eos similique soluta obcaecati nihil sunt. Harum, facilis magni. Quod totam soluta consectetur delectus nihil quas eveniet dolores ratione autem numquam quos suscipit animi similique eum nam voluptate illum debitis voluptates tenetur optio, alias inventore! Iure sapiente, earum. Rem, corporis officia.
      </div>

      <div class="block_2" id="block_2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate doloribus nesciunt quisquam nemo magnam facere voluptatum temporibus, voluptas rem. In voluptatem adipisci consequuntur rerum dolor sequi labore provident! Porro nesciunt expedita unde esse, illum animi eum molestias cupiditate provident, officia doloremque libero ipsum vel quod mollitia ab itaque quibusdam ex nihil quaerat. Nam veniam dolore recusandae dicta nisi odio voluptates porro nobis quam necessitatibus iusto alias, vero eligendi atque qui quis autem soluta quasi aperiam, excepturi saepe vitae eum eos, ab praesentium. Vitae suscipit eos quo. Consectetur dignissimos beatae odio quos, quidem, enim quo autem expedita sunt, deleniti quam blanditiis aspernatur quia non modi minus eveniet maiores corporis minima molestiae ipsa tempore eius vitae! Officiis suscipit dignissimos molestiae expedita, veniam nulla quis id consectetur fuga optio! Quis commodi excepturi quo perspiciatis nostrum impedit non nihil praesentium fugiat, odit, voluptate perferendis dolore architecto illum ipsum unde eligendi consectetur numquam sint inventore sit quibusdam! Voluptatibus quaerat amet ad fugiat error repellat dolorem, autem eos repellendus harum pariatur esse rem mollitia temporibus fuga, laborum numquam alias voluptas porro soluta reiciendis ipsum commodi! Dignissimos ratione consequatur nobis quam, adipisci magnam quasi repudiandae. Cumque qui fuga, nemo, tempore vero architecto deserunt perferendis nihil quibusdam optio autem, velit ipsum. Tempora commodi est eum. Ea adipisci, maiores quo aut. Dignissimos aut eligendi repudiandae dolores, distinctio excepturi tempore blanditiis voluptatibus autem. Repudiandae nam eius, ullam quam. Reprehenderit minus omnis sint, inventore fuga quisquam, iusto est quae, facilis deleniti beatae dignissimos. Consequuntur nostrum possimus facilis dolorem, molestiae delectus facere, rem ipsum, adipisci, explicabo vitae itaque. Nemo maxime ex sunt, mollitia dolore consequuntur odio numquam possimus deleniti ab nihil quis laborum, accusamus, iste vel et quae eum! Ullam quae non sit rerum vel, itaque fuga hic eum, expedita sequi, nihil ab facilis aut? Excepturi officia reprehenderit dignissimos, cupiditate sit obcaecati!
      </div>

    </div>

Answer 1

您是否真的需要所有这些grid资料-您的摘要中没有明显的原因吗？如果您不能这样做，这可能是一个解决方案：

* {
  box-sizing: border-box;
}

.headers {
  position: fixed;
  width: 100%;
  top: 0;
}

.top_bar {
  background-color: black;
  color: white;
  padding: 10px 0 0 10px;
  font-size: 150%;
  height: 100px;
}

.navigation {
  padding: 10px 0 0 10px;
  background-color: lightgrey;
  height: 80px;
}

.content {
  background-color: pink;
}

.block_1 {
  margin-top: 180px;
  padding: 20px 0;
}

.block_2 {
  margin-top: 20px;
}

<div class="wrapper">

  <div class="headers">

    <div class="top_bar">Header</div>

    <div class="navigation">
      <li><a href="#block_1">Block_1</a></li>
      <li><a href="#block_2">Block_2</a></li>
    </div>

  </div>

  <div class="content">

    <div class="block_1" id="block_1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse repellendus eaque, commodi ea quisquam illum aperiam libero repudiandae, ex laboriosam sunt aspernatur voluptatum voluptate laborum recusandae. Recusandae perspiciatis molestiae dolorem dolore
      deleniti quisquam accusantium obcaecati. Deserunt illo nisi obcaecati facere ex illum hic consequatur? Repudiandae quod alias asperiores quas exercitationem officiis et nulla consequatur deserunt modi possimus veritatis minus vitae, veniam, iste
      ducimus sunt reiciendis saepe rerum? Quidem et atque ducimus eos cum, repudiandae, distinctio facere dignissimos fugiat voluptatibus, quae quam. Magni unde, delectus placeat commodi similique ipsam obcaecati iste laboriosam, autem numquam impedit
      explicabo omnis quo consequuntur tenetur doloribus error eveniet accusamus dolorem, quibusdam non reprehenderit! Unde illum sequi minima accusamus, iure, magni ipsam illo eius vitae, aut error voluptatem autem harum. Ea possimus autem numquam suscipit
      quasi facere similique quas, veritatis, at officiis neque odio consequuntur quia esse pariatur alias necessitatibus mollitia laboriosam, voluptas nam amet beatae eius! Cupiditate facere voluptatibus minus voluptas suscipit debitis, quae illo officiis
      enim saepe placeat rerum ut, sapiente dolore deleniti possimus, doloribus animi quo porro sint? Possimus natus laboriosam vel quas et. Voluptatem dolor a omnis neque, praesentium quas voluptates laudantium molestiae aliquam blanditiis esse natus
      nostrum deleniti quae, corporis delectus aliquid maiores sit et fuga atque odio. Placeat dicta esse, aspernatur dignissimos molestias hic facere consectetur quia veniam ratione iusto cupiditate dolorum suscipit non neque in magni dolorem nam odit
      perferendis similique labore! Doloribus et officia ad sed aspernatur minima quo quod omnis! Adipisci consequuntur, impedit in vel ratione, repellat dolor cupiditate. Quod nobis, dicta cumque eius illum. Sed eius eos similique soluta obcaecati nihil
      sunt. Harum, facilis magni. Quod totam soluta consectetur delectus nihil quas eveniet dolores ratione autem numquam quos suscipit animi similique eum nam voluptate illum debitis voluptates tenetur optio, alias inventore! Iure sapiente, earum. Rem,
      corporis officia.
    </div>

    <div class="block_2" id="block_2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate doloribus nesciunt quisquam nemo magnam facere voluptatum temporibus, voluptas rem. In voluptatem adipisci consequuntur rerum dolor sequi labore provident! Porro nesciunt expedita unde
      esse, illum animi eum molestias cupiditate provident, officia doloremque libero ipsum vel quod mollitia ab itaque quibusdam ex nihil quaerat. Nam veniam dolore recusandae dicta nisi odio voluptates porro nobis quam necessitatibus iusto alias, vero
      eligendi atque qui quis autem soluta quasi aperiam, excepturi saepe vitae eum eos, ab praesentium. Vitae suscipit eos quo. Consectetur dignissimos beatae odio quos, quidem, enim quo autem expedita sunt, deleniti quam blanditiis aspernatur quia non
      modi minus eveniet maiores corporis minima molestiae ipsa tempore eius vitae! Officiis suscipit dignissimos molestiae expedita, veniam nulla quis id consectetur fuga optio! Quis commodi excepturi quo perspiciatis nostrum impedit non nihil praesentium
      fugiat, odit, voluptate perferendis dolore architecto illum ipsum unde eligendi consectetur numquam sint inventore sit quibusdam! Voluptatibus quaerat amet ad fugiat error repellat dolorem, autem eos repellendus harum pariatur esse rem mollitia
      temporibus fuga, laborum numquam alias voluptas porro soluta reiciendis ipsum commodi! Dignissimos ratione consequatur nobis quam, adipisci magnam quasi repudiandae. Cumque qui fuga, nemo, tempore vero architecto deserunt perferendis nihil quibusdam
      optio autem, velit ipsum. Tempora commodi est eum. Ea adipisci, maiores quo aut. Dignissimos aut eligendi repudiandae dolores, distinctio excepturi tempore blanditiis voluptatibus autem. Repudiandae nam eius, ullam quam. Reprehenderit minus omnis
      sint, inventore fuga quisquam, iusto est quae, facilis deleniti beatae dignissimos. Consequuntur nostrum possimus facilis dolorem, molestiae delectus facere, rem ipsum, adipisci, explicabo vitae itaque. Nemo maxime ex sunt, mollitia dolore consequuntur
      odio numquam possimus deleniti ab nihil quis laborum, accusamus, iste vel et quae eum! Ullam quae non sit rerum vel, itaque fuga hic eum, expedita sequi, nihil ab facilis aut? Excepturi officia reprehenderit dignissimos, cupiditate sit obcaecati!
    </div>

  </div>