Javascript 顶部的滑动菜单隐藏在Safari移动栏后面

我在iOS Safari上的下拉设置有严重问题。想象一个网站，上面有一个标题。如果单击标题，它将向下滑动，就像移动电话上的任何通知中心一样。我选择的方式很简单。我有一个带有此css的

：

.settings{
    position: fixed;
    width: 100%;
    height: calc(100vh + 60px);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index: 10;
}

.hide{
    top: -100vh;
}

现在，它看起来是这样的：

现在，下一步是通过添加名为“show”的类来创建它“可滑动”，这是我使用jQuery完成的

这真的让它很棒。它只是起作用了！突然，我在我的iPhone上尝试了这个网站，由于底部的栏一直显示，直到你滚动，我的hipe都消失了

因为它看起来像这样：

到目前为止？我的菜单滑动正确，在任何浏览器中都很好看，但在Safari中，它就隐藏在吧台后面，所以用户实际上无法关闭它

我尽了最大努力解决这个问题，但没有一件事真的如我所愿

PS：我想你知道这一点，但当你使用

bottom:0时，它会起作用，然后它“知道”有关该条的信息，并在其正上方正确停止。但是，由于设置是使用
top
位置计算的，因此
不会执行动画，这是我的设计所必需的

感谢任何帮助/解决方案
 大卫，不幸的是，iOS Safari充满了令人不快的惊喜

其中之一就是iOS Safari认为的
100vh


iOS Safari中的视口高度不等于Chrome或Firefox中的窗口内部高度

例如，在iPhone 7plus上
100vh==696px
，但
window.innerHeight==628px


在iPhone 6上
100vh==628px
，但
window.innerHeight==559px


等等

因此，解决方案是摆脱
100vh


假设
主体
是
的偏移父项。设置
使用
100%
：

.settings {
    position: fixed;
    width: 100%;
    height: calc(100% + 60px);
    ...
}

.hide {
    top: -100%;
}

此外，您不需要在
.show
类中使用
calc
（因为0vh==0）：

伟大的谢谢写得很好的回答。我明天会试试，看看是否对我有效。现在谢谢你！没问题！去年夏天我遇到了这个问题，“太可怕了。Safari是新的IE J。
.settings {
    position: fixed;
    width: 100%;
    height: calc(100% + 60px);
    ...
}

.hide {
    top: -100%;
}

.show {
    top: -60px;
}