title: .mouseleave not working with "if" statement
body: <p>I have a navigation menu.I want it to change the opacity to 1 when i hover the cursor over it then IF the page is scrolled down and mouse is no longer hovering over it decrease opacity to 0.5.
  I have this jQuery code :</p>
  
  <pre><code>  // JavaScript Document
  jQuery(document).ready(function() {
  
  
    var navOffset = jQuery("nav").offset().top;
  
    jQuery(window).scroll(function() {
  
      var scrollPos = jQuery(window).scrollTop();
  
      if (scrollPos &gt; navOffset) {
        jQuery("nav").stop(true);
        jQuery("nav").addClass("fixed");
        jQuery("nav").fadeTo(1000, 0.5);
  
      } else {
        jQuery("nav").stop(true);
        jQuery("nav").removeClass("fixed");
        jQuery("nav").fadeTo(1000, 1.0);
      }
  
     });
  
     $("nav").mouseenter(function(){
         jQuery("nav").stop(true);
        jQuery("nav").fadeTo(1000,1.0);  
       });
  
  
    jQuery("nav").mouseleave(function(){
        if (scrollPos &gt; navOffset) {
         jQuery(this).stop(true);
         jQuery(this).fadeTo(1000,0.5);
        }
        });
  
  });
  </code></pre>
  
  <p>And this CSS code :</p>
  
  <pre><code>.fixed { 
  position:fixed;
  top:0;
  }
  </code></pre>
  
  <p>When i hover the mouse it works but when i no longer hover over it and my page is scrolled down, wont return to his opacity.Thank you for any help that you can give.</p>