视差：如何避免空格？

Question

如您所见，尽管使用JS而不是CSS，我正在尝试实现视差效果！正如您在CodePen中所看到的那样，我遇到的麻烦是，当我滚动时，顶部有一个空白空间，它会不断增加吗？您是否有解决此问题的想法？或者更确切地说，使img本身保持固定，只有横幅线随着滚动而移动！

在我的代码下面：

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  var imgPos = scrollTop / 2 + 'px';
  console.log("imgPos", imgPos);
  $('.banner_img_desktop').find('img').css('transform', 'translateY(' + imgPos + ')');
});

.banner {
  position: relative;
  max-width: unset !important;
  margin-left: -20px !important;
  margin-right: -20px !important;
  .banner_container {
    background-color: #e7e6e4;
    &:before,
    &:after {
      color: #fff;
      text-align: center;
      display: block;
      width: 100%;
      background-color: #000;
      text-transform: uppercase;
      font: 10px/10px Helvetica, Arial, sans-serif;
      padding: 5px 0px;
    }
    &:before {
      content: 'Advertisement';
    }
    &:after {
      content: 'Scroll to continue with content';
      position: absolute;
      bottom: 0;
    }
    .banner_content {
      position: relative;
      .banner_img_desktop {
        display: block;
        figure {
          overflow: hidden;
        }
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="article one">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Aliquam placerat sem at mauris suscipit porta. Cras metus velit, elementum sed pellentesque a, pharetra eu eros. Etiam facilisis placerat euismod. Nam faucibus neque arcu, quis accumsan leo tincidunt varius. In vel diam enim. Sed id ultrices ligula.
    Maecenas at urna arcu. Sed quis nulla sapien. Nam felis mauris, tincidunt at convallis id, tempor molestie libero. Quisque viverra sollicitudin nisl sit amet hendrerit. Etiam sit amet arcu sem. Morbi eu nibh condimentum,
  </div>
  <div class="banner">
    <div class="banner_container">
      <div class="banner_content">
        <div class="banner_img_desktop">
          <figure>
            <img src="http://www.ucodice.com/kinglinkr/front/img/banner.png" alt="">
          </figure>
        </div>
      </div>
    </div>
  </div>
  <div class="article two">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Aliquam placerat sem at mauris suscipit porta. Cras metus velit, elementum sed pellentesque a, pharetra eu eros. Etiam facilisis placerat euismod. Nam faucibus neque arcu, quis accumsan leo tincidunt varius. In vel diam enim. Sed id ultrices ligula.
    Maecenas at urna arcu. Sed quis nulla sapien. Nam felis mauris, tincidunt
  </div>
</div>