Question

我需要在滚动时更改div的背景图像就像在这个site

中一样

Answer 1

好！由于您还没有发布任何代码，我建议您采取一些步骤来实现：

绑定滚动事件。
然后获得偏移顶部位置。
现在根据偏移顶部位置，您可以更改背景。

Answer 2

尝试以下代码。您可以添加if或switch语句来添加所需的类

$(document).scroll(function(e){
  var scrollAmount = $(window).scrollTop();
  if (scrollAmount > 200) {
$('.main-bg').addClass('jason-bg');
  }
// or you can do with switch statement instead of IF

});

Answer 3

使用这个简单的html布局：

<div class="background x1"></div>
<div class="background x2"></div>
<div class="content"></div>

和这个css：

body, html, div {
  height: 100%;
  margin: 0;
}
.content {
  height:1500px;
}
.x1 {
  background-image: url(https://i.ytimg.com/vi/ETDz5z46Loo/maxresdefault.jpg);
}
.x2 {
  background-image: url(http://www.neyralaw.com/wp-content/uploads/2012/07/tokyo-blue-background-4547.jpg);
}
.background {
  background-size:cover;
  height:100%;
  width:100%;
  position:fixed;  
}

您的网络中有2个背景图片，总是覆盖整个窗口，一个在另一个上面。

content是你未来项目的容器，我只给它1500px高度，这样就会显示一个滚动条。

然后，只有这个简单的jquery：

var change = $('.x2');
$(window).on('scroll', function () {
  var op = $(this).scrollTop();
  change.css({
    'opacity': (1 - op / 100)
  });
});

您将使x2图像逐渐将其不透明度从1滚动到100滚动时不变为0。

这比使图像在固定的滚动点更改更好，即使您添加了一个转换以使其流畅。

JSFIDDLE

＆＃13;

var change = $('.x2');
$(window).on('scroll', function () {
  var op = $(this).scrollTop();
  change.css({
    'opacity': (1 - op / 100)
  });
});

＆＃13;

body, html, div {
  height: 100%;
  margin: 0;
}
.content {
  height:1500px;
}
.x1 {
  background-image: url(https://i.ytimg.com/vi/ETDz5z46Loo/maxresdefault.jpg);
}
.x2 {
  background-image: url(http://www.neyralaw.com/wp-content/uploads/2012/07/tokyo-blue-background-4547.jpg);
}
.background {
  background-size:cover;
  height:100%;
  width:100%;
  position:fixed;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="background x1"></div>
<div class="background x2"></div>
<div class="content"></div>

＆＃13;

编辑：第二个方法

在固定滚动位置转换和处理图像的更简单方法是使用此脚本：

$(window).scroll(function () {
      if ($(window).scrollTop() > 200) {
        $(".x4").addClass("opacity");
      } else {
        $(".x4").removeClass("opacity");
      }
      if ($(window).scrollTop() > 400) {
        $(".x3").addClass("opacity");
      } else {
        $(".x3").removeClass("opacity");
      }
      if ($(window).scrollTop() > 600) {
        $(".x2").addClass("opacity");
      } else {
        $(".x2").removeClass("opacity");
      }
  });

在向图像容器滚动200,400和600px时添加类：

.opacity {
  opacity: 0
}

<强> JSFIDDLE

＆＃13;

$(window).scroll(function () {
      if ($(window).scrollTop() > 200) {
        $(".x4").addClass("opacity");
      } else {
        $(".x4").removeClass("opacity");
      }
      if ($(window).scrollTop() > 400) {
        $(".x3").addClass("opacity");
      } else {
        $(".x3").removeClass("opacity");
      }
      if ($(window).scrollTop() > 600) {
        $(".x2").addClass("opacity");
      } else {
        $(".x2").removeClass("opacity");
      }
  });

＆＃13;

body,
html,
div {
  height: 100%;
  margin: 0;
}

.content {
  height: 1500px;
}

.x1 {
  background-image: url(https://i.ytimg.com/vi/ETDz5z46Loo/maxresdefault.jpg);
}

.x2 {
  background-image: url(http://www.neyralaw.com/wp-content/uploads/2012/07/tokyo-blue-background-4547.jpg);
}

.x3 {
  background-image: url(http://awalls.xyz/wp-content/uploads/2015/11/free-backgrounds-for-desktop-2BE.jpg);
}

.x4 {
  background-image: url(http://fewfice.com/dcim/llp/22/4363196-hd-background.jpg);
}

.background {
  background-size: cover;
  height: 100%;
  width: 100%;
  position: fixed;
  transition: all 1s ease;
  opacity:1;
}

.opacity {
  opacity: 0
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="background x1"></div>
<div class="background x2"></div>
<div class="background x3"></div>
<div class="background x4"></div>
<div class="content"></div>

＆＃13;

如何在滚动

3 个答案: