0

我有一个 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>

4

2 回答 2

1

看起来像这样

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>

（片段最好运行整页或通过“编辑此片段” - 在小片段运行窗口中实际上不起作用）

于 2019-11-15T14:08:18.073 回答
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>

谢谢你...

于 2019-11-16T06:37:52.270 回答