视差功能将我的图像分成垂直的两半

Question

我运行遇到了一个疯狂的问题：我的视差效果变得很糟糕。

当我没有打开背景重复时，我会在图像上方约 200 像素处得到一个白色 space，如果打开背景重复，我的图像会在 space 中重复] 多于。

我不知道还能怎么解释。
当我刷新页面时，图像位于适当的位置，但是一旦有滚动事件，图像就会向下弹回并在顶部有额外的 space 。

我用 CSS 和 JQuery 尝试了各种方法都无济于事。我当然希望你们中的一位专家能解决这个问题。

我在 https://codepen.io/eghoff/pen/MzbLBo 有一个 Codepen，但它不会像我解释的那样显示刷新。

为此你可以去这里：https://agilewebsitedesigns.co.uk/indexHome.html

感谢所有帮助。

$(window).scroll(function() {

  parallax();

});

function parallax() {

  var wScroll = $(window).scrollTop();

  $('.parallax--bg').css('background-position', 'center ' + (wScroll * 0.250) + 'px');

  $('.parallax--box').css('top', -5 + (wScroll * 0.0125) + 'em');
}

.sliderContainer {
  background-color: white;
  background-image: url("../images/001-homepage-images/slider.jpg");
  height: 800px;
  background-position: center;
  background-size: cover;
  width: 80%;
  margin: 0 auto;
  padding: 0;
}

.parallax--bg,
.parallax--box {
  transition: initial;
}

.parallax-curtain {
  height: 650px;
  padding-top: 125px;
  background: rgba(255, 255, 255, 0.0);
}

.pTextContainer {
  width: 100%;
  height: 400px;
  background: transparent;
  text-align: center;
}

.pText h3 {
  font-size: 2em;
  color: white;
  margin: 0 auto;
  padding-top: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="sliderContainer parallax--bg">
    <div class="parallax-curtain">
      <div class="pTextContainer">
        <div class="pText">
          <h3>Knowing when you need help is a big thing</h3>
          <h3>Finding the right help can be a daunting task</h3>
          <h3>I am here to help you</h3>
        </div>
      </div>
    </div>
  </div>

</section>

Answer 1

您的图片从页面顶部偏移了大约 1000px，这意味着当您实际滚动到它时，scrollTop() 是 1000px。您的计算结果是 background-position 的 center 250px。 250px 是您看到的空白。

为了解决这个问题，您可以做类似 offset().top - scrollTop() 的事情。这确保当您向下滚动到图像时，background-position 将大致为 center 0px.

function parallax() {
  var $parallaxBg = $('.parallax--bg');
  var wScroll = $(window).scrollTop();
  var wOffset = $parallaxBg.offset().top;
  var wBackgroundPos = (wScroll-wOffset) * 0.250;

  $parallaxBg.css('background-position', 'center ' + wBackgroundPos + 'px');
  $('.parallax--box').css('top', -5 + (wScroll * 0.0125) + 'em');
}

这是 your codepen 的更新版本。

视差功能将我的图像分成垂直的两半

Parallax Feature is splitting my image in two vertical halves

jquery

css

parallax