Add class to element on scroll [duplicate]

Question

Add class to element on scroll [duplicate]

Navigation

#1 by (2 votes)

1

I have a website 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.

link

However, I wanted to add a class to the body when the user tried to scroll the page down, and to remove that class when trying to scroll up (of course it will not, because the page does not have scroll, addition and removal of the class would be to give the effect of page exchange).

I tried something with jquery type:

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

However, this jquery only works when overflow is not hidden.

Is there anything I could do to achieve the desired effect?

jquery css addclass

asked by anonymous 01.02.2017 / 18:17

1 answer

How to get only the month of a date with Laravel 5.3? Fill in a Dropdown (Select)

score 2 · Accepted Answer

Assign the event wheel to the body tag.

$('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 the wheel of a pointing device (usually a mouse) is rotated. This event replaces the non-standard deprecated mousewheel event.

About the event:

link