Olá!
Eu estou precisando arranjar uma maneira de dar toggle em uma classe na body
quando faço uma grande rolagem na página (Ex: 1000px). Porém, o problema é o fato da minha página ser UMA tela completa com overflow: hidden
. (Isso significa que não há rolagem e tudo acontece nesta tela).
Eu tentei o método óbvio:
if ($(window).scrollTop() > 1000){
$('body').addClass( "endScroll");
}
else {
$('body').removeClass("endScroll");
}
O problema nesse caso, quando tento adicionar a classe endScroll
após a rolagem de 1000px é como eu disse lá em cima, por conta da página ser um overflow: hidden
, não há de fato uma rolagem que afaste do topo, então ele ignora a rolagem e nada acontece. (Para esclarecimento, quando o usuário rola, acontece uma animação na página).
Então eu tentei este método:
$(document).bind('mousewheel', function(e) {
var delta = e.originalEvent.wheelDelta;
if (delta < 0) {
$('body').addClass("endScroll");
} else if (delta > 0) {
$('body').removeClass("endScroll");
}
});
Embora ele funcione e adicione a classe, ele adiciona assim que o usuário rola uma única vez. Eu estou tendo dificuldades em fazer acontecer após os 1000px.
Obrigado desde já!