Add class to on scroll element

Asked

Viewed 351 times

1

I have a site that in css, have these statements for the body:

body {
    background: #fab52d;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    color: #FFFFFF;
    overflow: hidden;
}

In the following link, you can see how the site is (Landing page). Its height is fixed at 100vh.

http://www.jogodavelhadigital.com.br/alvorada-iii/site/

However, I wanted you to add a class to the body when the user tries to scroll the page down, and remove that class when trying to scroll up (of course he will not succeed, because the page has no scroll, the addition and removal of class would give the effect of page exchange).

I tried something with jquery like:

$(window).scroll(function() {
   // código aqui
}

However, this jquery only works when the overflow is not Hidden.

There is something I could do to achieve the desired effect?

jquery css addclass

1 answer

2


Assign the event wheel for the tag body.

$('body').bind('wheel', function (e) {


if (e.originalEvent.deltaY < 0 ) {

    $('body').removeClass('sua classe')

}
else {//rolou pra baixo

    $('body').addClass('sua classe')

}


});

The wheel Event is Fired when a wheel button of a Pointing device (usually a mouse) is rotated. This Event Replaces the non-standard deprecated mousewheel Event.

About the event:

https://developer.mozilla.org/en-US/docs/Web/Events/wheel

https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY

Browser other questions tagged jquery css addclass

You are not signed in. Login or sign up in order to post.