我已修复 header 的代码。当向下滚动条时，我将类 .headerFixed 添加到 id #navHeader。
但我有一个问题，在 Chrome 浏览器中它完美地工作但在 Safari iOS 中出现一个奇怪的效果(当出现固定标题时左右动画)
有什么想法吗？
谢谢
#navHeader {
height: 96px;
position: relative;
top:0;
z-index: 3;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.headerFixed{
position: fixed !important;
width: 100%;
background: #000;
opacity: 0.8;
z-index: 9 !important;
display: block;
left: 0;
}
最佳答案
我可能有类似的问题，这里有一个视频链接，显示了实际问题。
https://dl.dropboxusercontent.com/u/9247710/2016-08-17%2012.54.16.mp4
主页以固定标题打开。当您向下滚动页面时，一切都很好。第一次触摸页面时，Safari 应用程序栏会缩小，导航会很好地粘附在视口(viewport)顶部。但是，当您点击菜单图标打开左侧抽屉时，整个页面会神奇地向上滑动到 Safari 应用栏下方。
页眉和抽屉都有position: fixed应用于他们。 <body>使用 position: relative; overflow-y:scroll; -webkit-overflow-scrolling: touch; .可能值得注意的是，我正在使用 translate3d() 在左侧抽屉和页面包装器上执行动画/转换。 .
关于ios - Safari iOS 中修复的奇怪效果标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34945089/