Question

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

这在桌面上工作正常（浏览器窗口缩小到500px以下，以模仿移动屏幕尺寸），但它不能在移动设备上运行。有工作吗？

我的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/

从overflow: scroll

中删除#sitewrap

为了避免手指在整个地方写"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>

手机上的jquery scrollTop事件无法正常工作

1 个答案: