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

Question

我正在使用Material-Ui Appbar但是当我向下滚动页面时,appbar会在iOS 10的地址栏下方.而地址栏也会保持打开而不是折叠.我使用的是默认材质UI主题.

我不认为它应该以这种方式工作.有没有一个如何正确执行此操作的示例？

理想情况下,如果AppBar固定在页面顶部会很棒.

谢谢.

Answer 1

它实际上是按设计工作的.如果要将其固定到页面顶部,则需要将CSS位置设置为"fixed".这可以根据需要将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/