问：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/