Question

我已修复此标头的代码。当滚动条向下时，我将类.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;
}

Answer 1

我可能有类似的问题，这里有一个视频链接，显示了行动中的问题。

https://dl.dropboxusercontent.com/u/9247710/2016-08-17%2012.54.16.mp4

主页打开时带有固定标题。当你向下滚动页面时，事情很好。首次触摸页面时，Safari App栏会缩小，导航会很好地粘贴到视口的顶部。但是，当您点击菜单图标打开左侧抽屉时，整个页面会神奇地滑动并在Safari应用栏下滑动。

标题和抽屉都已应用position: fixed。 <body>使用position: relative; overflow-y:scroll; -webkit-overflow-scrolling: touch;。可能值得注意的是，我正在使用translate3d()在左抽屉和页面包装器上进行动画/转换。

在safari iOS中修复了奇怪的效果标题

1 个答案: