CSS位置固定不能在移動設備上正常工作

Question

我正在實現一個固定的垂直菜單，它在桌面上效果很好，在移動設備（IOS，Android）上看起來不錯...只要你不放大在頁面上。當您在移動設備上放大時，固定元素開始覆蓋其他頁面內容（因爲它固定在視口上的某個位置）。但我在尋找的只是一個導航欄，只能垂直固定。因此，如果您放大並水平滾動，則導航欄不會覆蓋內容。有沒有辦法做到這一點？

謝謝！

Answer 1

我不知道爲什麼你的問題是downvoted。這是一個常見的問題，據我所知，無法僅使用css垂直修復。您有以下選擇之一：

• 禁止使用視meta標籤縮放（但是這可能是壞的無障礙）
• 控制使用在移動設備上的JavaScript菜單位置。例如，通過替代使用固定位置，給它一個絕對位置和每個window.scroll事件，更新菜單的頂部位置。然而，這會導致不理想的設備上出現不愉快的結果（因此在大多數設備上，您會看到持續衝擊的位置更新）。第二個問題是Apple設備上的平滑滾動，這會阻止您在「平滑滾動」期間獲取有關文檔滾動位置的任何信息。所以，你會那麼也必須禁用平滑滾動（可能與身體上的CSS線），但是這也給了用戶一個負面經驗

這就是爲什麼菜單通常變成漢堡包圖標，只出現一次漢堡包圖標按下。在水平滾動期間，小漢堡包圖標不會在左上角變得如此煩人，因爲它很小