求助：实现粘性导航栏从顶部向下弹出的动画效果

我正在实现一个粘性导航栏，需求是：向下滚动时隐藏导航栏，向上滚动或到达页面底部时重新显示。功能逻辑已经实现，但导航栏重新显示时，会从顶部下方6.3%的位置向上滑到顶部，过渡效果怪异。我想要的是导航栏从顶部向下弹出的效果，尝试过CSS动画但没成功，附上代码求解决。

核心问题分析 #

导航栏初始是position: absolute; top:6.3%，添加sticky类后变成position: fixed; top:0，浏览器会自动在这两个位置之间做过渡，导致出现向上滑的奇怪效果。要实现从顶部向下弹出，需要让导航栏隐藏时处于顶部上方（top为负的高度值），显示时回到top:0。

具体修改步骤 #

1. 调整CSS基础样式与过渡逻辑 #

• 给.main-navbar添加默认过渡属性，统一控制动画
• 隐藏状态（非sticky）时，让导航栏处于视口上方（top: -4.5rem，与导航栏高度一致）
• 用额外类initial-position区分页面加载时的初始位置和滚动后的隐藏位置

.main-navbar{
  position: absolute;
  display: inline-flex;
  background-color:white;
  width: 100%;
  height: 4.5rem;
  box-shadow: -1px 2px 4px rgb(110, 109, 109);
  /* 统一过渡所有属性变化 */
  transition: all 0.2s ease-in-out;
  /* 默认隐藏在视口上方 */
  top: -4.5rem;
}

/* 页面加载时的初始位置 */
.initial-position {
  top: 6.3%;
}

/* Sticky状态：固定在顶部 */
.sticky {
  position: fixed;
  top: 0;
  z-index: 999999; /* 整合z-index到该类，无需单独加类 */
}

2. 修正JavaScript逻辑 #

• 页面加载时给导航栏添加initial-position类，确保初始位置正确
• 调整滚动判断逻辑，区分初始滚动（小于100时保持初始位置）和滚动后的隐藏/显示状态
• 移除多余的z-index-999999类

var navbar = document.getElementById("navbar");
// 页面加载时设置初始位置
navbar.classList.add("initial-position");

function scrollDetect() {
  var lastScroll = 0;
  window.onscroll = function() {
    let currentScroll = document.documentElement.scrollTop || document.body.scrollTop;

    // 初始滚动位置（小于100）：保持初始位置，不隐藏
    if (currentScroll < 100) {
      navbar.classList.add("initial-position");
      navbar.classList.remove("sticky");
      lastScroll = currentScroll;
      return;
    }

    // 向下滚动：隐藏导航栏（回到视口上方）
    if (currentScroll > lastScroll) {
      navbar.classList.remove("sticky");
      navbar.classList.remove("initial-position");
    } 
    // 向上滚动：显示导航栏（固定在顶部）
    else {
      navbar.classList.add("sticky");
      navbar.classList.remove("initial-position");
    }

    lastScroll = currentScroll;
  };
}

scrollDetect();

3. 修正HTML语法错误 #

原HTML存在标签未闭合、img写法错误问题，修正后：

<div class="main-navbar" id="navbar">
  <nav>
    <ul class="nav-list">
      <li class="dropdown-item-1">
        <a href="">Men</a>
        <ul class="sub-menu">
          <li><a href="#">shirts</a> </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

<div class="contentforscroll">
  <img src="https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_906,c_limit/83f15213-514a-4963-a765-74c379b89a34/nike-just-do-it.png"
       alt="" style="width: 1300px;">
  <img src="https://static.nike.com/a/images/f_auto/dpr_1.0,cs_srgb/w_906,c_limit/83f15213-514a-4963-a765-74c379b89a34/nike-just-do-it.png"
       alt="" style="width: 1300px;">
</div>

效果说明 #

• 页面加载时，导航栏处于top:6.3%的初始位置
• 向下滚动超过100px后，导航栏滑到视口上方隐藏
• 向上滚动时，导航栏从顶部向下滑到固定位置（top:0），实现预期的弹出效果
• 滚动回顶部（小于100px）时，导航栏回到初始的top:6.3%位置

内容的提问来源于stack exchange，提问作者Thor The dog