Question

我遇到了一个疯狂的问题：我的视差效果越来越好。

当我没有背景重复功能时，我会在图像上方获得约200px的空白，如果启用了背景重复功能，则会在上方的该空间中重复我的图像。

我不知道该怎么解释。
当我刷新页面时，图像位于适当的位置，但是一旦发生滚动事件，图像就会弹起并在顶部保留额外的空间。

我尝试使用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的更新版本。

视差功能将我的图像分为两个垂直部分

1 个答案: