Q：Material-Ui Appbarブラウザのアドレスバーのスクロールを修正する方法

Question

私はMaterial-Ui Appbarを使用していますが、ページを下にスクロールすると、AppbarがiOS 10のアドレスバーの下に表示されます。崩壊するよりも。私はデフォルトのマテリアルUIテーマを使用しています。

私はこのように動作するはずです。これを正しく行う方法の例はありますか？

AppBarがページの上部に固定されているのが理想的です。

ありがとうございました。

Answer 1

実際には設計通りに動作しています。ページの上部に固定する場合は、CSSの位置を「固定」に設定する必要があります。これはAppBarを必要に応じて上に固定しますが、そこに浮いているので、その下にある独自の高さのコンテンツを覆い隠すことがあります。だから、いくつかのパディングやマージン（デフォルトでは56px）でそれを補う必要があります。例外容器に詰め物を使用して：

<div style={{ paddingTop: 56 }}> 
    <AppBar style={{ position: 'fixed', top: 0 }} /> 
    <p> 
    Lots of tall/long content here... 
    </p> 
</div> 

ワーキングjsFiddle：https://jsfiddle.net/qe141fd2/1/