scroll - 滚动条的粘性褪色画廊

Question

我正在尝试创建一个包含部分的页面。每个部分都有文本和图像。在移动设备中，一切都正常滚动。

但是在桌面中，我需要将所有图像都贴在顶部，并且在部分之间滚动时，图像需要褪色

示例
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>

标签： scrollgallerysticky