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

Question

我在页面顶部有一个固定的导航元素，每当出现iOS苹果浏览器导航（URL地址）工具栏时，我都会尝试移动该元素，使其不被其覆盖。

我首先通过使用高度为100vh的元素获取实际页面高度来导出工具栏的高度。 此高度与window.innerHeight之间的差是工具栏的高度。

但是，问题在于top: 0工具栏有时覆盖了top: 0 ，有时它紧随其后。 这意味着我不能仅将top设置为工具栏的高度。 根据工具栏的生成方式，它有时会工作，但并非每次都能工作。

关于如何找出top: 0被工具栏覆盖以及何时未被覆盖的任何想法？

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

Answer 1

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

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

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