我正在实现一个固定的垂直菜单。它在台式机上运行良好，在移动设备(IOS, Android)上看起来也很棒……只要你不把页面放大就行。当你在移动设备上缩放时，固定元素开始覆盖其他页面内容(因为它固定在视口的某个位置，所以应该这样做)。
但是我想要的是一个垂直固定的导航栏。如果你放大并水平滚动导航栏不会覆盖内容。有办法做到这一点吗?
这是一个常见的问题，据我所知，仅使用CSS是无法解决垂直问题的。您可以选择:
- 使用viewport meta标签禁用缩放(但这可能不利于访问)。
- 在移动设备上使用javascript控制菜单位置。例如，不使用固定位置，而是在每个窗口上给它一个绝对位置。滚动事件时，更新菜单的顶部位置。然而，这将导致在不先进的设备上产生令人不快的结果(所以在大多数设备上，你会看到位置更新伴随着不断的冲击)。第二个问题将是苹果设备上的平滑滚动，这将阻止你在"平滑滚动"期间获得任何关于文档滚动位置的信息。所以你还必须禁用平滑滚动(可能在body上使用CSS行)，但这也会给用户带来负面体验。
这就是为什么菜单通常变成汉堡包图标，并且只在汉堡包图标被按下时才出现。在水平滚动时，左上角的小汉堡图标不会那么烦人，因为它非常小。