Question

我通过研究构建并复制+粘贴这个固定的Headertitle但不幸的是我加载了一边并向上滚动后有一个问题，标题跳进而不是后退。任何人都可以帮我删除这个Bug吗？

它超级烦人......我几乎尝试了一切来删除它。

我希望我的标题固定在一个点并保持在顶层，这就是为什么我也把zindex -999

＆＃13;

window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

＆＃13;

body 
  margin: 0;
  font-family: Impact;z-index: 999;
}

.top-container {
  position: absolute;
  text-align: center;
  background: #transparent;
  color: #transparent;
  z-index: 999;
}

.header {
  position: auto;
  padding: auto, auto;
  text-align: center;
  background: #transparent;
  color: #transparent;
  z-index: 999;
}

.content {
  padding: 10px;
  z-index: 999;
}

.sticky {
  position: fixed;
  text-align: center;
  top: 0;
  z-index: 999;
  width: 100%;
}

.sticky + .content {
  position: absolute;
  padding-top: 0px;
  z-index: 999;
}

＆＃13;

<div class="header" id="myHeader">
    <h2><center>97cm</center></h2>
</div>

＆＃13;

Answer 1

只需添加粘性类并摆脱javascript

<div class="header sticky" id="myHeader">

<强>解释

你的粘性课程设置为＆＃34;坚持＆＃34; div位于页面顶部，但您实际上并未将此课程分配给<div>。

然后你有一些javascript检查你是否已经向下滚动页面而然后将.sticky类分配给你的<div>

白色空间＆＃34;跳跃＆＃34;你看到的是滚动和应用.sticky类的javascript之间的延迟。您始终希望此</div>具有粘性，因此只需将sticky类永久分配给它，然后删除所有javascript。

基本HTML白色方头Bug主页

1 个答案: