滚动上的fadeIn nav在移动设备上不起作用

Posted 2023-03-14

【中文标题】滚动上的fadeIn nav在移动设备上不起作用

【英文标题】：fadeIn nav on scroll not working on mobile

【发布时间】：2015-11-07 16:04:03

【问题描述】：

当用户向下滚动页面时，我在 nav 元素上使用了一个简单的 jQuery fadeIn。我也在使用基于 javascript 动画的插件 skrollr。在这里您可以看到我的页面，我已将文件上传到服务器：

http://www.unf.edu/~n00804716/my-site/

正如您在桌面大小的浏览器上看到的那样，当您滚动时，动画会根据您在视口中的滚动点开始。 RGB 圆圈旋转，一旦动画完成旋转并淡出，导航就会淡入。出于某种原因，这仅适用于大屏幕。动画在移动设备上运行，但导航没有淡入。这是我用来在动画完成后淡入导航的脚本：

$(window).on('scroll', onScroll);
   function onScroll() 
        if ($(document).scrollTop() > window.innerHeight) 
            $(".click").fadeIn(700);
            $("#logo").hide();
         else 
            $(".click").fadeOut(700);
        
    

【参考方案1】：

在移动设备上，您可能需要以不同的方式调用事件：

jQuery live scroll event on mobile (work around)

【讨论】：

甚至使用jquery mobile：w3schools.com/jquerymobile/jquerymobile_events_scroll.asp

我有点不确定如何在我自己的代码中实现这一工作。