メディア幅があるJQuery関数

Question

私は、500pxでスクロールダウンするときに、サイドバーにフェードするJQueryスクリプトを作成しました。これはエラーなしで動作しています。しかし、私はそれをメディアサイズをチェックする別の関数でラップしようとしました。フェードインは、メディアのサイズが1024より大きい場合にのみ有効です。動作しないため、コンソールにエラーが表示されません。あなたは私を助けることができますか？

jQuery(function($) { 

    function checkPosition() { 
    if (window.matchMedia('(min-width: 767px)').matches) { 

$(window).scroll(function() {  

    var scroll = $(window).scrollTop(); 

    if (scroll >= 500) { 
     $("body").addClass("right_side_menu_opened"); 
$(".side_menu").addClass("nav-fade"); 
    } 
    else { 
     $("body").removeClass("right_side_menu_opened"); 
$(".side_menu").removeClass("nav-fade"); 
    } 
}); 
    } else { 

    } 
    } 

}); 

Answer 1

あなたは決して呼び出されない関数の中にJS全体をラップしました。

あなたべき

• は、関数宣言（function checkPosition()）
• を削除するか、宣言を削除

機能（checkPosition()）を呼び出す：

jQuery(function($) { 

    if (window.matchMedia('(min-width: 767px)').matches) { 

$(window).scroll(function() {  

    var scroll = $(window).scrollTop(); 

    if (scroll >= 500) { 
     $("body").addClass("right_side_menu_opened"); 
$(".side_menu").addClass("nav-fade"); 
    } 
    else { 
     $("body").removeClass("right_side_menu_opened"); 
$(".side_menu").removeClass("nav-fade"); 
    } 
}); 
    } else { 

    } 

}); 

関数を呼び出します：

jQuery(function($) { 

    function checkPosition() { 
    if (window.matchMedia('(min-width: 767px)').matches) { 

$(window).scroll(function() {  

    var scroll = $(window).scrollTop(); 

    if (scroll >= 500) { 
     $("body").addClass("right_side_menu_opened"); 
$(".side_menu").addClass("nav-fade"); 
    } 
    else { 
     $("body").removeClass("right_side_menu_opened"); 
$(".side_menu").removeClass("nav-fade"); 
    } 
}); 
    } else { 

    } 
    } 

    checkPosition(); 

}); 

注：あなたはビューポートのサイズを確認したい場合は、ビューポートの幅を取得するために$(window).width();を使用することができます。