标题上不需要的转换延迟

Question

我遇到了奇怪的过渡延迟。当用户向下滚动屏幕 70 像素或更多时，导航栏会从“顶部：-100%；”滑入。到“顶部：0；”但它的延迟为 1 秒。不知道怎么抹掉……

为了捕捉导航栏，我使用了 document.getElementById。

这是我的html：

<header id="header">
<div class="header-container">
    <div class="header-downbar">
        <div class="header-downbar-content">    
            <div class="header-logo">
                <div class="header-logo-container"> 
                    <a href="index.php"><img src="grafika/Fenix-logo-white.png" alt=""></a>
                </div>
            </div>
            <div class="header-navbar">
                <nav>
                    <ul>
                        <a href=""><li><p class="link">XXXX</p></li></a>
                        <a href=""><li><p class="link">XXXX</p></li></a>
                        <a href=""><li><p class="link">XXXX</p></li></a>
                        <a href=""><li><p class="link">XXXX</p></li></a>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
</header>

这是我的标题 CSS：

<style>
 header {
 z-index: 3;
 width: 100%;
 position: fixed;
 top: -100%;
 transition-delay: 0s;
 transition: 0.6s;
 }
</style>

这是我的 JS：

<script type="text/javascript">

const header = document.getElementById("header");

window.onscroll = function() {
    slideInHeader();
}

function slideInHeader() {
    if(document.body.scrollTop > 70 || document.documentElement.scrollTop > 70) {
        header.style.top = "0";
    }
    else {
        header.style.top = "-100%";
    }
}

</script>

Answer 1

我没有看到任何延迟，但是100% 表示总滚动高度的 100%，这将导致动画速度不一致，具体取决于页面内容的大小。

这种方法使用菜单高度本身来隐藏它：

const header = document.getElementById("header"),
      _top = -header.getBoundingClientRect().height + "px";

header.style.top = _top;
window.onscroll = function() {
  slideInHeader();
}

function slideInHeader() {
  if (document.body.scrollTop > 70 || document.documentElement.scrollTop > 70) {
    header.style.top = "0";
  } else {
    header.style.top = _top;
  }
}

html,
body {
  height: 300%;
}

header {
  z-index: 3;
  width: 100%;
  position: fixed;
  top: -100%;
  transition-delay: 0s;
  transition: 0.6s;
}

<header id="header">
  <div class="header-container">
    <div class="header-downbar">
      <div class="header-downbar-content">
        <div class="header-logo">
          <div class="header-logo-container">
            <a href="index.php"><img src="grafika/Fenix-logo-white.png" alt=""></a>
          </div>
        </div>
        <div class="header-navbar">
          <nav>
            <ul>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
              <a href="">
                <li>
                  <p class="link">XXXX</p>
                </li>
              </a>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</header>