.mouseleave не работает с оператором «if»

Question

У меня есть меню навигации. Я хочу, чтобы он менял непрозрачность до 1, когда я наводил курсор на нее, тогда ЕСЛИ страница прокручивается вниз, и мышь больше не парит над ней непрозрачность до 0,5. У меня есть этот JQuery код:

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

}); 

И этот CSS код:

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

Когда я наведите курсор мыши он работает, но когда я больше не парят над ним и моей странице не прокручивается вниз, не возвратит к его непрозрачности. Спасибо за любую помощь, которую вы можете дать.

Answer 1

Это немного сложно понять проблему без рабочего jsfiddle, что очень поможет пользователям SO попытаться выяснить, что не так с образцом кода.

Однако, похоже, что корень проблемы заключается в тестировании scrollPos, который определен только в рамках обработчика событий scroll. Поэтому в обработчике событий mouseleave переменная scrollPos не определена (как вы могли видеть и в javascript-консоли).

Вы можете сделать scrollPos переменной, определенной в рамках обработчика document.ready; Однако лучшим подходом, на мой взгляд, было бы определение небольшой функции, которая проверяет, смещено ли сдвиг прокрутки за пределы сдвига nav. Код будет выглядеть примерно так:

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