具有媒體寬度的JQuery函數

我創建了一個JQuery腳本，該腳本在向下滾動500px時淡入側邊欄。這工作沒有任何錯誤。但是，我試圖將其包裝在另一個函數中，該函數檢查介質大小。如果介質尺寸大於1024，淡入只能起作用。它不起作用，並且在控制檯中沒有出現任何錯誤。你能幫我嗎？具有媒體寬度的JQuery函數

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 { 

    } 
    } 

});

來源

2017-05-09 Lorenzo Varano

你正在聲明函數checkPosition（），但你沒有調用它的權利？把所有這個函數放在jQuery之外（function（$）{並且在裏面調用它。jQuery（function（$）{checkPosition（）}）; – Roy

你已經將整個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();獲得視口的寬度。

來源

2017-05-09 09:15:39

具有媒體寬度的JQuery函數

回答

相關問題