Липкая выцветшая галерея с помощью скроллера - PullRequest
Новая
       35

Липкая выцветшая галерея с помощью скроллера

1 голос
/ 19 февраля 2020

Я пытаюсь создать страницу с разделами. В каждом разделе есть текст и изображение. В мобильном телефоне все прокручивается нормально.

Однако в Desktop мне нужно, чтобы все изображения оставались наверху, а при прокрутке между разделами изображения должны исчезать

Пример
https://drive.google.com/file/d/1vqHjdar3-F9l38Ea15g8VVk1kg-CfgVf/view (вторая часть короткого видео) 

body {
  background-color: #000000;
  color: #ffffff;
  font-family: 'Arial', sans-serif;
  font-size: 13px;
}

p {
  line-height: 1.56;
  letter-spacing: 0.3px;
  color: #878787;
}

.step {
  min-height: 90vh;
}

.wrap-gallery {
  position: fixed;
  /*   width: 45vw; */
  width: 400px;
  max-width: 100%;
  right: 0;
}

.wrap-gallery img {
  max-width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
}
<div class="container">
  <div class="wrap-gallery">
    <img src="https://loremflickr.com/500/380/dog">
    <img src="https://loremflickr.com/500/380/cat">
    <img src="https://loremflickr.com/500/380/bunny">
    <img src="https://loremflickr.com/500/380/bird">
  </div>

  <h2 class="d-block d-md-none">How the magic happens?</h2>
  <div class="row step step1">
    <div class="col-md-6">
      <h2 class="d-none d-md-block">How the magic happens?</h2>
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Elit eget gravida cum sociis natoque penatibus et magnis dis. Mus mauris vitae ultricies
        leo integer malesuada nunc.</p>
      <p>&nbsp;</p>
    </div>
    <div class="col-md-6 order-first order-md-last d-block d-md-none"><img src="https://loremflickr.com/500/380/dog"></div>
  </div>
  <div class="row step step2">
    <div class="col-md-6">
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Elit eget gravida cum sociis natoque penatibus et magnis dis. Mus mauris vitae ultricies
        leo integer malesuada nunc.</p>
    </div>
    <div class="col-md-6 order-first order-md-last d-block d-md-none"><img src="https://loremflickr.com/500/380/cat"></div>
  </div>
  <div class="row step step3">
    <div class="col-md-6">
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Elit eget gravida cum sociis natoque penatibus et magnis dis. Mus mauris vitae ultricies
        leo integer malesuada nunc.</p>
    </div>
    <div class="col-md-6 order-first order-md-last d-block d-md-none"><img src="https://loremflickr.com/500/380/bunny"></div>
  </div>
  <div class="row step step4">
    <div class="col-md-6">
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Elit eget gravida cum sociis natoque penatibus et magnis dis. Mus mauris vitae ultricies
        leo integer malesuada nunc.</p>
    </div>
    <div class="col-md-6 order-first order-md-last d-block d-md-none"><img src="https://loremflickr.com/500/380/bird"></div>
  </div>
</div>
...