jQueryscrolltop功能在手机上不起作用

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

Answer 2

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

因此，不幸的是，您无法在窗口滚动时监视偏移量。

或者，尝试检查一些假冒滚动的插件，该插件允许您在“滚动”时“监视”偏移量。 例如： https : //github.com/cubiq/iscroll