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

您可以在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');
    }
});

Answer 2

检查$(window).width：

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

Answer 3

您可以在运行代码之前检查是否正在移动设备上加载网站并添加条件。我没有足够的资源对此进行测试，但希望对您有帮助

        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 4

您可以尝试这个简单的CSS。

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

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

4 个答案: