javascript - iOS导航工具栏下的固定元素

我在页面顶部有一个固定的导航元素，每当 iOS safari 导航（URL 地址）工具栏出现时我试图移动它，这样它就不会被它覆盖。

我通过首先使用具有 height 的元素获取实际页面高度来推导工具栏的高度100vh。这个高度和window.innerHeight工具栏的高度之差。

然而，问题是它top: 0有时被工具栏覆盖，有时它就在它之后。这意味着我不能只设置top工具栏的高度；它有时会起作用，但不是每次都起作用，具体取决于工具栏的生成方式。

关于如何top: 0确定工具栏何时覆盖以及何时不覆盖的任何想法？

顺便说一句，这只是横向模式下的问题。在纵向中，top: 0永远不会被工具栏覆盖。

标签： javascripthtmlioscss

我找到了解决方案。您必须监视最后的滚动方向。

如果最后一个滚动方向是up则top: 0永远不会被工具栏覆盖。

如果最后一个滚动方向是，down那么top应该是top: Math.min(toolbarHeight, window.pageYOffset)