javascript - 当我向下滚动页面时，如何让不同的背景图像点亮？

Question

我计划将六张不同的图片设置为固定背景图片，我希望在我向下滚动页面时不同的图片会在不同的时间点亮。但到目前为止，我什至只是让背景图片显示出来都遇到了麻烦。到目前为止，我计划在 styles.css 中设置其中的六个:

#background1 {
  background-image: url(img/background1.png);
  background-size: auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: left; 
}

但没有一个出现，我不知道为什么。文档的其余部分也没有太多其他内容，包括 html 和 css 文档。

此外，在我以某种方式设法将背景图像放置到位之后，我是否会在滚动时使用 Javascript 来控制图像的照明/调光？我正在考虑与此类似的事情，但我不确定它是否可行:

$(function() {
   $(window).scroll(function () {
      if ($(this).scrollTop() > 100) {
         $(‘body’).addClass(‘dimBackground’)
      }
      if ($(this).scrollTop() < 100) {
         $(‘body’).removeClass(‘dimBackground’)
      }
   });
});

如果这是一个愚蠢的问题，我真的很抱歉，因为我是新手，所以我只是为了提问而创建了一个帐户。非常感谢!

Answer 1

您的 CSS 可能有问题，但我不能确定，因为您没有全部共享。根据我的经验，您可能会在处理 body 标签时遇到麻烦。尝试改用 div 并跟踪其上的滚动。

这应该让你开始:

$("#content").scroll(function() {
  if ($(this).scrollTop() > 100) {
    $("#bg").css(
      "background-image",
      "url(https://images.unsplash.com/photo-1558980664-10e7170b5df9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60)"
    );
  } else {
    $("#bg").css(
      "background-image",
      "url(https://images.unsplash.com/photo-1583369105090-c94b8c87e589?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60)"
    );
  }
});

body {
  margin: 0;
  padding: 0;
}

#bg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-size: cover;
  background-image: url(https://images.unsplash.com/photo-1583369105090-c94b8c87e589?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60);
}

#content {
  position: absolute;
  overflow: scroll;
  height: 100vh;
  width: 100vw;
}

#largecontent {
  height: 200vh;
  color:white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg"></div>

<div id="content">
  <div id="largecontent">this div is just to force the content div to scroll</div>
</div>

此外:不要总是自己发明一切。您可能需要为这个检查一些库:用于滚动的 bounds.js，用于效果的 animate.css。

此外:不要忘记预加载图像，因此当用户到达滚动点时它们已经加载。