如何为移动设备禁用我的 javascript

Question

我想为移动设备禁用以下 javascript 时头疼。我是 javascript 中的一个假人，所以会很感激任何帮助。

$(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.navbar-sticky').addClass('sticky');
    } else {
        $('.navbar-sticky').removeClass('sticky');
    }
});

Answer 1

查看$(window).width:

$(() => {
    if ($(window).width > 481) {
        $(window).scroll(function() {
            if($(this).scrollTop() > 50) {
                $('.navbar-sticky').addClass('sticky');
            } else {
                $('.navbar-sticky').removeClass('sticky'); 
            }
        });
    }
});

Answer 2

您可以检查您是否在移动设备上加载网站并在运行代码之前添加条件 我没有资源来测试这个，但希望这对你有帮助

        var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
        var element = document.getElementById('text');
        if (isMobile) {
            //dont use 
        } else {
            $(window).scroll(function() {
                   if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non 
                 opaque*/ 
                {
                $('.navbar-sticky').addClass('sticky');
                } else {
                 $('.navbar-sticky').removeClass('sticky');
               }
            });
        }

Answer 3

你可以试试这个简单的 CSS。

@media screen and (max-width:479px){
#mobile-header {
  position: Static !important;
}

Answer 4

您可以在javascript的起点添加以下代码，如果是任何移动设备则返回

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
        return 
}

$(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.navbar-sticky').addClass('sticky');
    } else {
        $('.navbar-sticky').removeClass('sticky');
    }
});