Javascript 报头上不需要的转换延迟

我有一个奇怪的过渡延迟。当用户向下滚动屏幕70px或更大时，导航栏会从“顶部：-100%；”滑入“顶部：0”；但延迟1s。我不知道如何删除它

为了捕获导航栏，我使用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>

标题{
z指数：3；
宽度：100%；
位置：固定；
前-100%；
转换延迟：0s；
过渡：0.6s；
}

这是我的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>

const header=document.getElementById（“header”）；
window.onscroll=函数（）{
slideInHeader（）；
}
函数slideInHeader（）{
if（document.body.scrollTop>70 | | document.documentElement.scrollTop>70）{
header.style.top=“0”；
}
否则{
header.style.top=“-100%”；
}
}

我没有看到任何延迟，但是

100%

表示总滚动高度的100%，这将根据页面内容的大小产生不一致的动画速度

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

const header=document.getElementById（“header”），
_top=-header.getBoundingClientRect（）.height+“px”；
header.style.top=\u top；
window.onscroll=函数（）{
slideInHeader（）；
}
函数slideInHeader（）{
if（document.body.scrollTop>70 | | document.documentElement.scrollTop>70）{
header.style.top=“0”；
}否则{
header.style.top=\u top；
}
}

html，
身体{
身高：300%；
}
标题{
z指数：3；
宽度：100%；
位置：固定；
前-100%；
转换延迟：0s；
过渡：0.6s；
}

现在我明白了，谢谢。它正是我想要的：）