问:Material-Ui Appbar如何修复在浏览器地址栏后面滚动的问题

Question

我使用Material-Ui Appbar，但是当我向下滚动页面时，Appbar在iOS 10的地址栏下面。地址栏也保持打开，而不是崩溃。我使用默认的材质UI主题。

我不认为它应该这样工作。有没有一个正确的例子?

理想情况下，如果AppBar被固定在页面的顶部，那就太好了。

谢谢。

Answer 1

它实际上是按照设计工作的。如果你想让它固定在页面的顶部，你需要将CSS位置设置为"fixed"。这将AppBar粘贴在顶部，但由于它是浮动的，它可能会模糊其下方内容的高度值。所以，你应该用一些填充或边距(默认为56px)来补偿。在外部容器上使用padding:

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