Question

我目前正在制作的其中一个网页上有一个子标题。此元素的位置是继承的，直到它到达视口的顶部，然后我通过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">

问题仍在发生？

Answer 1

检查一下 - https://jsfiddle.net/ej83w0k9/

$(window).scroll(function() {    
var scroll = $(window).scrollTop();

if (scroll >= 100) {
    $(".fixed-header").addClass("fixedPos");
}
else{

 $(".fixed-header").removeClass("fixedPos");
}
});

然后你的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;
}

如果这对您有用，请告诉我。

修复iOS上的标题略微滚动

1 个答案: