CSS липкий вопрос. Содержимое внутри «застрявшего» элемента не прокручивается на первом дочернем элементе - PullRequest
Новая
       11

CSS липкий вопрос. Содержимое внутри «застрявшего» элемента не прокручивается на первом дочернем элементе

0 голосов
/ 03 октября 2019

Я пытаюсь создать своего рода слайдер с помощью CSS Sticky. Идея состоит в том, чтобы каждый «слайд» отображал заголовок, а затем просматривал дополнительный контент на рабочем столе. Это все работает нормально, но на моем первом слайде содержимое не прокручивается, а на последующих слайдах. На самом деле не уверен, почему.

Codepen 

.slide{
 margin-top: -22px;
  position:sticky;
  top:0;
}
.slide-background{
  width:auto;
  height:100vh;
  position: sticky;
  top: 0;
  z-index: 0;
  background-position:center;
  background-size:cover;
}

.slide-background h1{
  padding: 20% 60% 0 10%;
  color:white;
}


.slide-content{
  padding:40px;
  height:300vh;
  position:relative;
  padding-left:50%;
}
<div class="slider">
    <div class="slide">
      <div class="slide-content-wrap">
      <div class="slide-background">
        <h1>Avenues New York is a 15-grade independent school located in the Chelsea neighborhood of Manhattan.</h1>
      </div>
      <div class="slide-content">
        <h1>Slide 1</h1>
        <h2>The subtitle</h2>
        <p> Text that is informative and pithy</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et quam vitae eros blandit rutrum. Morbi convallis tincidunt dui non gravida. Quisque luctus venenatis velit, et pharetra velit vehicula eu. Ut orci nisl, lobortis a turpis eget,
          pharetra ullamcorper enim. Maecenas malesuada at dolor quis malesuada. Integer et ultricies justo, sed dictum urna. Phasellus ante massa, ullamcorper ac blandit quis, rutrum eget lorem. Duis dignissim rutrum elit auctor tempus.</p>
        </div>
      </div>
    </div>
    <div class="slide">
      <div class="slide-background">
        <h1>Avenues New York is a 15-grade independent school located in the Chelsea neighborhood of Manhattan.</h1>
      </div>
      <div class="slide-content">
        <h1>Slide 2</h1>
        <h2>The subtitle</h2>
        <p> Text that is informative and pithy</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et quam vitae eros blandit rutrum. Morbi convallis tincidunt dui non gravida. Quisque luctus venenatis velit, et pharetra velit vehicula eu. Ut orci nisl, lobortis a turpis eget,
          pharetra ullamcorper enim. Maecenas malesuada at dolor quis malesuada. Integer et ultricies justo, sed dictum urna. Phasellus ante massa, ullamcorper ac blandit quis, rutrum eget lorem. Duis dignissim rutrum elit auctor tempus.</p>
        
      </div>
    </div>
  </div>
...