Css 修复了iOS上的标题稍微滚动的问题

我在当前正在构建的一个网页上有一个子标题。这个元素的位置是inherit，直到它到达视口的顶部，然后我通过JavaScript添加一个

fixedPos

类

.fixedPos{
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    top: 0;
}

正在添加此类。问题是，当我在页面上下滚动时，固定标题会随着内容轻微移动。我做了一些研究。将这些元素添加到body标记以避免此错误继续

body{
    background-color: white;
    overflow-x: hidden;
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
}

我还有一个视口元标记：

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, target-densitydpi=device-dpi">

问题仍在发生？

请查看以下内容-

然后你的CSS：

.fixed-header {
  background-color: #fff;
  width: 100%;
  position: absolute;
  top: 100px;
}

/*the fixed snippet, triggered by js*/
.fixedPos{
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    top: 0;
  }

.fixed-header__nav li {
  display: inline-block;
  list-style-type: none;
}

---

让我知道这是否适合你

我的副标题就是这样做的。它只是在iphone上轻微滚动。

.fixed-header {
  background-color: #fff;
  width: 100%;
  position: absolute;
  top: 100px;
}

/*the fixed snippet, triggered by js*/
.fixedPos{
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    top: 0;
  }

.fixed-header__nav li {
  display: inline-block;
  list-style-type: none;
}