Почему эта jquery не меняет непрозрачность?

Question

Мой код должен устанавливать непрозрачность элемента div от 0 до 1, когда пользователь начинает прокручивать тело. По какой-то причине это не работает.

$("bod").load(function(){
    document.getElementById("bodyHeader").style.opacity = "1";
});

Извините за плохие имена:)

Answer 1

load не имеет ничего общего с прокруткой.

Для прокрутки тела следует использовать: $(window).scroll(function () { ... })

$(window).scroll(function () {
document.getElementById("something").style.opacity = "1";
})

body {
height: 800px;
}

#something {
height: 200px;
width: 200px;
background-color: red;
opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Scroll to see the magic</p>
<div id="something">
</div>

ОБНОВЛЕНИЕ ВАШЕГО КОММЕНТАРИИ: Если вам нужно сделать это после прокрутки некоторых пикселей, вы должны использовать: $(window).scrollTop()

$(window).scroll(function () {
if($(window).scrollTop() > 40 && $(window).scrollTop() <= 80){
document.getElementById("something").style.opacity = "0.5";
}
else if($(window).scrollTop() > 80 && $(window).scrollTop() <= 120){
document.getElementById("something").style.opacity = "0.7";
}
else if($(window).scrollTop() > 120){
document.getElementById("something").style.opacity = "1";
}
})

body {
height: 800px;
}

#something {
height: 200px;
width: 200px;
background-color: red;
opacity: 0.4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Scroll to see the magic</p>
<div id="something">
</div>