.mouseleave not working with "if" statement

Question

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 :

  // JavaScript Document
jQuery(document).ready(function() {


  var navOffset = jQuery("nav").offset().top;

  jQuery(window).scroll(function() {

    var scrollPos = jQuery(window).scrollTop();

    if (scrollPos > 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 > navOffset) {
       jQuery(this).stop(true);
       jQuery(this).fadeTo(1000,0.5);
      }
      });

});

And this CSS code :

.fixed { 
position:fixed;
top:0;
}

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.

Answer 1

如果没有有效的jsfiddle，有点难以看到问题，这将极大地帮助SO用户尝试找出代码示例的问题。

但是，看起来问题的根源是测试scrollPos，它只在scroll事件处理程序的范围内定义。因此，在mouseleave事件处理程序中，未定义变量scrollPos（正如您在javascript控制台中也看到的那样）。

您可以使scrollPos在document.ready处理程序范围内定义的变量;但是，我认为更好的方法是定义一个小函数来检查滚动偏移量是否超出导航偏移量。代码看起来像这样：

function checkOffset(){
  return $(window).scrollTop()>$("nav").offset().top;
}

$(document).ready(function() {
  $(window).scroll(function() {
    if (checkOffset()) {
      $("nav").stop(true).addClass("fixed").fadeTo(1000, 0.5);
    } else {
      $("nav").stop(true).removeClass("fixed").fadeTo(1000, 1.0);
    }
  });

  $("nav").mouseenter(function(){
    $("nav").stop(true).fadeTo(1000,1.0);  
  });

  $("nav").mouseleave(function(){
    if (checkOffset()) {
      $(this).stop(true).fadeTo(1000,0.5);
    }
  });
});