javascript - 如何获取wheelDelta属性？

Question

我试图做到这一点，以便当wheelDelta为负值(向下滚动)时，我的导航栏“隐藏”(通过动画)，当wheelDelta为正值(向上滚动)时，导航栏重新出现(动画) )。

这是我的 JavaScript 代码:

/* 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);
      }
            
    });

但是这不起作用。我已经做了一些故障排除，发现问题是 delta 变量未定义。所以我认为我只是不知道如何正确获取wheelDelta属性。

有人可以向我展示如何获取wheelDelta属性值并将其存储在变量中的示例吗？

谢谢。

Answer 1

window.event 不是一个函数。另外，正如评论中提到的，scroll 与 mousewheel 不同。试试这个:

   $(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);
      }
    });