滚动显示内容？

Question

我想创建一个 div，其中内容 div 在其初始状态下是隐藏的。当用户向下滚动页面时，内容 div 将从父 div 的底部“显示”。我还想使用位于父 div 底部的图像（想想山）...暗示来自山后面的内容。

初始状态：

滚动：

Answer 1

在此示例中，山脉是一个粘性伪元素：展开代码片段以查看结果

body {
   font: 1.2rem/1.6 system-ui;
   margin: 0;
   
 
   img {
      inline-size: 100%;
      max-block-size: 100%;
      object-fit: cover; 
   }   
}

#sect-1 {
   block-size: calc(100dvb - 30vh);
}

#sect-2 {
   padding-inline: calc(50vw - 24rem);
}


div::after {
   content: "";
   position: sticky;
   display: block;
   bottom: 0;
   z-index: 1;
   inline-size: 100%;
   block-size: max(28vh, 20vw);
   background: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 400'><path d='M0 400 L0 250 L400 0 L1000 100 L1600 0 L2000 250 L2000 400' fill='red'/></svg>") 0 100% no-repeat;
   background-size: 100% auto;
}

<main>
   <div> 
      <section id="sect-1">
         <img src="https://placehold.co/1000x640?text=Section+1" />
      </section>
      <section id="sect-2">

      <h2>Section 2</h2>

      <p>Cat ipsum dolor sit amet, laboris sit. Sed. Eu quasi omnis or autem yet nulla. Consectetur. Reprehenderit duis sunt so cupidatat yet molestiae est. Veniam omnis, veritatis for laboris ut magnam. Dolorem elit qui for voluptatem so si explicabo. Aut dicta yet ullamco so anim. Eu doloremque for dolorem, so reprehenderit mollit and perspiciatis. Ipsa exercitationem. Aute molestiae. Velit sed, totam. Unde quia officia. Magni numquam for irure yet ipsa yet perspiciatis or et but adipisci. Dolor nulla yet cillum in nemo. Inventore. Quo ratione aliquid for ipsum yet adipisicing. Dolores illum and elit. Velitesse commodi but elit so minim id so non eaque. Vitae ipsam, dolor odit officia yet iure.</p>
      <p>Molestiae cillum so aliquam for suscipit and si so eos. Odit illo magnam for unde and sequi. Amet nequeporro or autem, magni aperiam. Commodi. Quasi illo id or accusantium. Proident nostrum amet, do nesciunt.</p>
      <p>Natus ipsam consequuntur. Sed do modi officia but dolore yet quisquam dolores. Ab quae so ipsa cillum. Modi architecto eiusmod eos, or ea, do. Esse in so quaerat or vel. Veritatis est ipsa so in. Culpa eu. Amet iste iure enim or consectetur. Adipisicing fugiat. Eiusmod nihil. Eos. Dicta. Ullam. Id. Sint officia, consequatur and beatae, for eum et and excepteur. Adipisci ut so elit or voluptate, eum, for unde aliquam. Non. Aute nihil consequuntur sed but quam ipsum. Ratione ex but fugit. Laborum labore. Aliquip. Corporis nostrum nulla and quia for esse yet dolores yet vel. Inventore magnam so veritatis yet si qui but perspiciatis, enim. Accusantium nihil. Consectetur sit ut deserunt magnam ad mollit.Unde rem beatae laborum nesciunt but quasi. Non numquam for officia, yet consequat veritatis ab, or suscipit. Ipsum quaerat for id corporis. Aliquip ullamco, doloremque duis quia so ratione but vel. Eiusmod anim and quaerat. Est. Corporis incididunt and quasi molestiae. Aliquip veniam ratione. Architecto dolor but quia aperiam yet iure incididunt. Aliquip elit yet ab dolores so si quasi and ea. Mollit ut, for nisi so quis. Iure consequatur yet culpa or beatae, yet ab dolor. Aliquid exercitation quae ad or voluptate velit. Irure esse quia, occaecat. Aliquam. Proident sequi minima, and eum but laboriosam fugiat, or aliquip. Laboris consequatur omnis aut. Ut labore or minima molestiae. Ea ut. Laboriosam eaque aliquam.</p>
      <p>Fugiat in so numquam and laudantium ratione. Explicabo minim. Eum minim in or iste. Suscipit. Magni ex yet eiusmod inventore or eiusmod so accusantium and anim. Quasi dolore quisquam aliquam for laboriosam totam. Elit sed modi but accusantium yet consequat sequi or exercitationem. Perspiciatis velitesse for sunt so dolorem est. Sunt laboris commodi aspernatur. Natus ullam and accusantium. Molestiae. Do aut or perspiciatis eiusmod and proident or eius and quam. Tempor. Voluptas iure molestiae so deserunt cupidatat and sed. Architecto do yet dolores yet ullam for eaque for nesciunt do. Exercitation labore illum so aliquid for tempora. Molestiae minima yet est for eiusmod. Exercitation excepteur inventore laudantium excepteur.</p>
      <p>Ipsum eos sint lorem aut, but veritatis. Eiusmod. Anim ex sed. Sit. Magna veniam dolor for iure. Eaque accusantium. Perspiciatis quisquam or ab voluptate, veniam. Autem explicabo tempora, and irure and cillum sint. Voluptate minima reprehenderit amet. Minima minima and occaecat for quae quia, or beatae amet. Adipisicing excepteur. Illo. Ullamco si or odit or inventore for tempora consequatur eos. Ratione proident molestiae duis yet dolores, but odit, irure. Accusantium consequat yet quasi excepteur for aliquid yet nulla so aperiam. Magnam cupidatat but ipsa but eu yet explicabo for ipsam so minim. Cillum cupidatat magna. Ullamco laudantium si but lorem, and sequi. Voluptatem magnam, or enim eius. Eius voluptate iste magni, yet irure modi. Natus odit yet elit. Amet veritatis adipisci, est but illo labore for nesciunt. Inventore nostrud but magnam aspernatur for rem. Amet labore yet nesciunt and nostrum. Dolores culpa quia, so exercitation. Cillum aperiam numquam for exercitationem. Id. Minim. Adipisicing ipsam laboris. Reprehenderit aliquam for pariatur enim yet minim but quasi. In veritatis laboris yet quis inventore but consequuntur. Minima exercitation dicta eiusmod for sit but ullamco. Occaecat veritatis but omnis, veritatis but fugit. Magnam exercitationem but eos eius but exercitationem and qui and enim. Labore vitae, but lorem adipisicing for eos and dolor. Eius vitae. Vitae eiusmod. Labore explicabo but vitae or laboriosam in for ex, yet elit. Beatae consectetur, yet explicabo so ut so minim eos. Irure lorem aliquip, error for quasi. Ex enim so beatae iure. Id dicta so iste. Nostrud laboris or nemo veniam nostrud, eiusmod nostrum. Nihil eu, dolor lorem qui and sunt.</p>
   </section>
  </div>
   
  <section>
     <img src="https://placehold.co/1000x640?text=Section+3" />
   </section>
</main>