Safari iPhone版本 - 视口顶部位于导航栏后面

Question

在横向模式下使用Safari的iPhone上，滚动时视口顶部位于导航栏后面。

这意味着像这样的元素：

.btn {
  position: fixed;
  top: 0;
  width: 100px;
  height: 50px;
  background: green;
}

使用scrollto（）或scrollTop（）后，

将位于导航栏后面。

这是一个满足这些情况的例子： https://codepen.io/dwigt/pen/GGJdYe

这是一个视频示例： http://www.fastswf.com/kOxTe2M

在示例中，当页面滚动点击时，绿色框将位于导航栏后面。

有没有办法在点击时将固定元素设置到导航栏的底部而不在固定元素上设置偏移顶部值？

我找到了带有解决方案的旧文章，但没有一个是有效的，也没有一个是最新的。