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