Как сделать фоновое изображение затухающим с помощью прокрутки в jQuery?

Question

Я хочу сделать затухающее фоновое изображение, когда прокручиваю страницу вниз.

Я видел что-то с двумя divs, которые исчезают с непрозрачностью. Что-то вроде этого:

<div class="background1"></div> 
<div class="background2"></div> 

И чем-то вроде кода jQuery, но я действительно не понял.

Надеюсь, кто-то может помочь.

Я думаю, что это можно сделать с scrollTop, но я не уверен, как это получить.

Answer 1

Вы на правильном пути. Привяжите событие к документу, чтобы проверить прокрутку и посмотреть, что такое высота.

$(document).scroll(function(){ 
    var scrollTop = $("html").scrollTop(); 
    if(scrollTop > 150){ 
     $(".background2").fadeIn(); 
    } 
    else 
     $(".background2").fadeOut(); 
})