【问题标题】:jQuery: Executing if more than 150px from topjQuery:如果从顶部超过 150px 则执行
【发布时间】:2026-02-19 19:20:03
【问题描述】:

我需要帮助来执行 mouseentermouseleave 功能,前提是您滚动了 150 像素或更多...

    $(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" );  }); 
 });

【问题讨论】:

  • 这段代码有什么问题...

标签: javascript jquery wordpress jquery-ui function


【解决方案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

});

【讨论】:

    【解决方案2】:

    在事件处理程序中移动 if 条件

    $(".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" );  }); 
     });
    

    【讨论】:

    • 顺便说一句,这段代码应该移到滚动事件处理程序之外,它应该简单地设置变量 top 的值
    【解决方案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" );
                }
            }
        )
    });
    

    【讨论】:

    • below_150 = (top > 150);