Help fading element in on scroll down and fade it out when scroll up has reached scrollTop

Help fading element in on scroll down and fade it out when scroll up has reached scrollTop

I am trying to fade an element, #topNav, in when the scroll-bar goes down and then fade it out when the scroll-bar goes up and reaches the scrollTop.

With this code, it fades in on scrollDown and when it hits the top.
  1. $(document).ready(function(){
  2.       function scrollFunc(e) {
  3.             if ( typeof scrollFunc.x == 'undefined' ) {
  4. scrollFunc.x=window.pageXOffset;
  5. scrollFunc.y=window.pageYOffset;
  6. }
  7. var diffX=scrollFunc.x-window.pageXOffset;
  8. var diffY=scrollFunc.y-window.pageYOffset;

  10. if(diffX<0){
  11.             // Scroll right
  12. }
  13. else if(diffX>0){
  14.       // Scroll left
  15. }
  16. else if(diffY<0){
  17.       // Scroll down
  18.       $('#topNav').fadeIn();
  19. }
  20. else if(diffY>0){
  21. // Scroll up
  22. if(document.body.scrollTop === 0){
  23. $('#topNav').fadeOut();
  24. }
  25. }
  26. else{
  27.       // First scroll event
  28.       $('#topNav').css('position','fixed').show().fadeIn();
  29. }
  30. scrollFunc.x=window.pageXOffset;
  31. scrollFunc.y=window.pageYOffset;
  32. }
  33. window.onscroll=scrollFunc;
  34. });