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)");
        }
   });
});

感谢您提出的所有建议。我已经尝试将$（窗口）切换为$（'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)");
        }
   });      
});

Answer 2

在移动设备上，仅当滚动停止时才会触发“滚动”事件。例如，如果您的手机上有一个大滑块，并且窗口保持滚动5秒钟，则滚动事件将在5秒后触发。

因此，遗憾的是，在窗口滚动时无法监视偏移量。

作为替代方案，尝试检查一些伪造滚动的插件，它允许您在“滚动”时“监视”偏移。例如：https://github.com/cubiq/iscroll

Jquery scrolltop功能无法在移动设备上运行

2 个答案: