javascript - Jquery scrolltop 功能不适用于移动设备

Question

我正在创建一个导航栏，当我向下滚动页面时它会淡入。 我的代码在桌面上运行良好，但当我切换到移动设备时却无法运行。

这是javascript:

 $(document).ready(function(){
    $(window).bind('scroll', function() {
        var distance = 100;

        if ($(window).scrollTop() > 50) {
            $('nav').css("background-color","rgba(6, 14, 49, 0.94)");
        }
        else {
          $('nav').css("background-color","rgba(6, 14, 49, 0.50)");
        }
   });
});

感谢您提出的所有建议。我已经尝试将 $(window) 切换为 $('body') 或 $('html') 但它们没有用

Answer 1

您可以使用 $().scroll 方法来实现想要的结果。

$(window).scroll(function() {  
      var distance = 50;
        if ($(window).scrollTop() > 50) {
            $('nav').css("background-color","rgba(6, 14, 49, 0.94)");
        }
        else {
          $('nav').css("background-color","rgba(6, 14, 49, 0.50)");
        }
   });      
});