javascript - jQuery:上から150px以上あれば実行する

Question

150 ピクセル以上スクロールした場合にのみ、 mouseenterおよびmouseleave機能を実行するための助けが必要です ...

    $(document).ready(function(){

            $(document).scroll(function() {
                var top = $(document).scrollTop();

        if (top > 150) $(".menywrapper").mouseenter(function(){
$(".main-navigation").removeClass( "nav-closed", 200, "linear" );  
 });
        if (top > 150) $(".menywrapper").mouseleave(function(){
$(".main-navigation").addClass( "nav-closed", 200, "linear" );  }); 
 });

Answer 1

各スクロールイベントで mouseenter/mouseleave をバインドしないでください。一度実行して var を確認してください。

$(document).ready(function(){
     var top = 0;
     $(document).scroll(function() {
         top = $(document).scrollTop();
     });

     $(".menywrapper").mouseenter(function(){
         if(top>150)
             $(".main-navigation").removeClass( "nav-closed", 200, "linear" );  
     });

     // same for mouseleave

});

Answer 2

if 条件を eventhandler 内に移動する

$(".menywrapper").mouseenter(function(){
   if (top > 150) 
      $(".main-navigation").removeClass( "nav-closed", 200, "linear" );  
});
$(".menywrapper").mouseleave(function(){
   if (top > 150) 
      $(".main-navigation").addClass( "nav-closed", 200, "linear" );  }); 
 });

Answer 3

ブール値を使用して、150 ピクセルを超えるか下回るかを追跡できます。

$(document).ready(function() {
    var below_150 = false;

    $(document).scroll(function() {
        var top = $(document).scrollTop();
        below_150 = (top > 150);
    }

    $(".menywrapper").hover(
        function() {
            if( below_150 )
            {
                $(".main-navigation").removeClass( "nav-closed", 200, "linear" );
            }
        },
        function() {
            if( below_150 )
            {
                $(".main-navigation").addClass( "nav-closed", 200, "linear" );
            }
        }
    )
});