移动设备上的jquery scrollTop事件不起作用

Question

如果 scrollTop 值超过 122px，我有一个淡入的 div。

这在桌面上运行良好（浏览器窗口缩小到 500 像素以下以模拟移动屏幕尺寸）但在移动设备上不起作用。有解决办法吗？

我的 HTML：

<div id="topNav" class="fw">
  <div class="container">
    <div id="scrollLogo">
      <img src="images/dualLogoMob-scroll.png" width="63" height="30" alt=""/>
    </div><!-- /#scrollLogo-->
    <div class="twelve columns">
      <a href="#" onClick="return false;" id="mobMenuTrig" class="test">Menu</a>
    </div><!-- /.twelve.columns-->
  </div><!-- /.container-->
</div><!-- /#topNav-->

工作网址：http://www.altitude-digital.co.uk/dev/DUAL-SITE/index.php

我现在的 JS：

<script>
jQuery(document).ready(function(){
    jQuery("#scrollLogo").hide();
    jQuery(function () {
        jQuery(window).scroll(function () {
          if (jQuery(window).scrollTop() > 122) {
            jQuery('#scrollLogo').fadeIn();
          } else {
            jQuery('#scrollLogo').fadeOut();
          }
        });
    });
 });
</script>

Answer 1

http://jsbin.com/voxace/

从#sitewrap 中删除overflow: scroll

为了让你的手指不用到处乱写"jQuery"：

<script>
jQuery(function( $ ){ // DOM ready and $ alias secured

   // Free to use $ as usual

   var $scrLogo = $('#scrollLogo'); // Cache your selectors for expensive DOM lookup
   var $win = $(window);

   $scrLogo.hide();
   $win.on("scroll load", function () { // Do on scroll but also on win load!
     if ($(this).scrollTop() > 122) {
       $scrLogo.stop().fadeIn(); // Use stop() to prevent anim. buildups
     } else {
       $scrLogo.stop().fadeOut();
     }
   });

 });
</script>