顺利更改背景图像

Question

当页面在特定数量滚动时，我尝试将更改后的背景效果附加到正文，以50％，20％，10％的页面速率滚动

这是我到目前为止所获得的Full Screen Fiddle

以下是示例代码：

HTML：

<div>
   <p>...</p>
   <!-- more <p> elements below -->
</div>

脚本：

jQuery(window).scroll(function () {
   var JarakScroll = 200; // jarak scrol
   var JumlahJarakPasScroll = jQuery(window).scrollTop();
   if (JumlahJarakPasScroll > JarakScroll) {
       jQuery('html').addClass('scrolled');
   } else {
       jQuery('html').removeClass('scrolled');
   }
});

背景正在改变，但没有任何效果，任何人都可以帮助应用好效果？

Answer 1

如果你希望背景图像改变效果不错，那么将背景图像应用于两个具有100％宽度和100％身高的div并且使用z-index正确放置的div可能会更好。

更具体地说，将第一个div放在第二个div的顶部，当你想要更改背景图像时，fadeOut第一个div。那将是一个很好的效果。我假设你可以在自己的代码上编码。