jQuery $（window）.scrollTop（）;で奇妙な動作をしています。携帯電話で

Question

私はある時点までスクロールするときに私のページのヘッダーをフェードインしようとしています。

何らかの理由でスクロールすると、特定のポイントでフェードインしません。何が起こるかは、スクロールを完全に停止してフェードアニメーションなしで表示されるまで表示されないことです。

ご協力いただければ幸いです。 （免責事項：私は、ソースコードを表示することの利点を持っていたので、私たちは一緒に仕事）

//Header to appear on scroll 
$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 

    if (scroll >= 150) { 
     $('.header-bar-small').fadeIn(); 
    } else { 
     $('.header-bar-small').fadeOut(); 
    } 
}); 

Answer 1

デニスの問題点を掘り下げる後、我々は解決策を発見しました。

ページに表示されるはずの3つの要素がありました.1つはスクロールに表示され、もう1つはスクロールが停止するまで表示されませんでした。 scrollTopの位置が更新されていて正しいと判断し、要素を表示するjavascriptが正しく実行されていると判断しました。 fadeIn（showと置き換えられました）を削除して、遅延描画の問題ではないことを確認しました。

これはCSSの問題であることが判明しました。何らかの理由で、position:fixedとz-index:1という別のdivのターゲットdivをラップすることで修正できました。奇妙なことは、表示しようとしていた要素がすでにこれらのスタイルを持っていたことですが、何らかの理由でラッパーを追加すると修正されます。

例えば：

<div class="showHideWrapper" style="position:fixed; z-index:1;"> 
    <div class="header-bar-small" style="position:fixed; z-index:1;"> 
     This should work. 
    </div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     //Header to appear on scroll 
     $(window).scroll(function() { 
      var scroll = $(window).scrollTop(); 

      if (scroll >= 150) { 
       $('.showHideWrapper').fadeIn(); 
      } else { 
       $('.showHideWrapper').fadeOut(); 
      } 
     }); 
    }); 
</script> 

私たちは、その要素にスタイルを取り去る、または完全に新しい要素に同じ動作を適用しようとしたが、我々は上記をやったまで、それは動作しませんでした。 position:relativeまたはposition:absoluteを設定しても、子要素が修正された可能性があります。

今のところ、このようなことをすると同様の問題が発生する可能性がありますが、誰かがこれを引き起こす原因について明確な説明をすることができれば、私はすべて耳にします。