使用jQuery更改滚动上的背景附件属性

Question

我有一个div，它有一个带有固定背景附件的背景图像。当带有背景图像的div使用jQuery时，我会从固定切换到滚动。我似乎已经让它工作了，但是当我向下滚动时，当属性改变时，似乎有跳转。如何避免这种跳转？

​

$(window).scroll(function() {
  var halfHeight = $(window).height() / 2
  if ($(this).scrollTop() >= $('.service-logo').offset().top + halfHeight) {
    $('.service-logo').addClass('bg-scroll');
  } else {
    $('.service-logo').removeClass('bg-scroll');
  }
});

.content {
  background: red;
  height: 1000px;
}

.content2 {
  background: black;
  height: 1000px;
}

.service-logo {
  background-image: url(https://www.w3schools.com/css/img_5terre.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 200px;
  background-position: center;
}

.bg-scroll {
  background-attachment: scroll !important;
}

.content3 {
  background: green;
  height: 1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class="content">

</div>

<div class="content2 service-logo">

</div>


<div class="content3">

</div>

​

Answer 1

尝试使用这个脚本，你会得到完美的定位与这个代码的任何屏幕。

​

$(window).scroll(function() {
  var sectionHeight = $('.service-logo').height();
  var windowHeight = $(window).height();
  if ($(window).scrollTop() >= $('.service-logo').offset().top + ((sectionHeight - windowHeight) / 2)) {
    $('.service-logo').addClass('bg-scroll');
  } else {
    $('.service-logo').removeClass('bg-scroll');
  }
});

.content {
  background: red;
  height: 1000px;
}
.content2 {
  background: black;
  height: 1000px;
}
.service-logo {
  background-image: url(https://www.w3schools.com/css/img_5terre.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 200px;
  background-position: center;
}
.bg-scroll {
  background-attachment: scroll !important;
}
.content3 {
  background: green;
  height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="content">
</div>
<div class="content2 service-logo">
</div>
<div class="content3">
</div>

​

谢谢..。

Answer 2

看起来像这样

background-position: center;

基于图像高度和background-size的组合，会导致不同的计算，而不是将其精确地放在您认为它应该到达的位置。

如果您手动将位置设置为content2的中间，则它可以平滑地工作：

      background-position: center 200px;

​

$(window).scroll(function() {
  //var halfHeight = $(window).height() / 2
  if ($(this).scrollTop() >= $('.service-logo').offset().top) {
    $('.service-logo').addClass('bg-scroll');
  } else {
    $('.service-logo').removeClass('bg-scroll');
  }
});

.content {
  background: red;
  height: 1000px;
}

.content2 {
  background: black;
  height: 1000px;
}

.service-logo {
  background-image: url(https://www.w3schools.com/css/img_5terre.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 200px;
  background-position: center 400px;
}

.bg-scroll {
  background-attachment: scroll !important;
}

.content3 {
  background: green;
  height: 1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class="content"></div>
<div class="content2 service-logo"></div>
<div class="content3"></div>

​

(snippet最佳运行全页或通过“编辑此snippet”-在小的snippet-run窗口中不起作用)