How do I get the wheelDelta property?

Question

I'm trying to make it so that my nav-bar 'hides' (via animation) when wheelDelta is negative (scroll down), and when wheelDelta is positive (scroll up) the nav-bar re-appears (animation).

Here is my JavaScript code for this:

/* Scrolling Animation */
    $(document).scroll(function () {
      var evt = window.event();
      var delta = evt.wheelDelta;
      
      if ( delta >= 120 ){
          $('.nav').animate({ top: '-65px' }, 200);
          $('body').animate({ top: '0px' }, 200);
      }
      else if ( delta <= -120 ){
          $('.nav').animate({ top: '0px' }, 200);
          $('body').animate({ top: '65px' }, 200);
      }
            
    });

It doesn't work, though. I've done some troubleshooting and I've figured out that the problem is that the delta variable is undefined. So I think that I just don't know how to properly get the wheelDelta property.

Can someone show me an example of how to get the wheelDelta property value and store it in a variable??

Thanks.

This anwser should help you. http://stackoverflow.com/questions/8886281/event-wheeldelta-returns-undefined — Oliver Castillo, Jul 24 '15 at 18:21
the problem is that scroll events are not just from the mouse, it's the moving of a pane in the html. that means that only the init has a wheel in play, after that, it's just the pane moving around that fires the scroll events (sometimes dozens a second). bind to the wheel events instead. — dandavis, Jul 24 '15 at 18:21

score 2 · Answer 1 · answered Jul 24 '15 at 19:14

window.event is not a function. Also as mentioned in comments scroll is different from mousewheel. Try this:

   $(document).on('mousewheel',function (evt) {
      var delta = evt.originalEvent.wheelDelta;
      console.log('scroll ' + delta, evt);
      if ( delta >= 120 ){
          $('.nav').animate({ top: '-65px' }, 200);
          $('body').animate({ top: '0px' }, 200);
      }
      else if ( delta <= -120 ){
          $('.nav').animate({ top: '0px' }, 200);
          $('body').animate({ top: '65px' }, 200);
      }
    });

How do I get the wheelDelta property?

1 Answers1

Linked