导航栏滚动定位异常求助：上滚时立即回到底部

当前问题：导航栏向下滚动时可固定在顶部，但向上滚动会立即回到初始底部位置，需求是让导航栏在窗口可见范围内保持当前位置。

原代码问题分析 #

原JS逻辑仅通过window.pageYOffset > navbar.offsetTop判断是否添加sticky类，但当导航栏变为fixed定位后，navbar.offsetTop会发生变化，且未区分滚动方向，导致向上滚动时直接移除类回到初始位置。

修改后的实现代码 #

HTML（无需修改）

<section class="section-1">
        <img class="logo" src="./Assets/Asset 2@3x.png" width="320" alt="Brand Icon">
        <p class="description">Luxury Jewelry Store</p>
      
        <nav class="navbar">
          <a href="#" class="navbar-link">Home</a>
          <a href="#" class="navbar-link">My Cart</a>
          <a href="#" class="navbar-link">My Orders</a>
          <a href="#" class="navbar-link">FAQs</a>
          <a href="#" class="navbar-link">About Us</a>
          <div class="search">
            <i class="fa-solid fa-magnifying-glass searchIcon"></i>
            <input class="searchBox" placeholder="Search..." type="search">
            <input type="submit" value="Search" class="searchButton">
      
          </div>
        </nav>
      </section>

CSS（无需修改）

.section-1{
    height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.navbar{
    display: flex;
    justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background-color: #92A9BD;
  position: absolute;
  bottom: 0;
  transition: all 0.3s;
  z-index: 1;
}

.sticky{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

JS（核心修改）

// 记录上一次滚动的位置
let lastScrollTop = 0;
const navbar = document.querySelector(".navbar");
// 预存导航栏初始底部对应的页面滚动阈值
const navbarInitialThreshold = navbar.offsetTop + navbar.offsetHeight;

window.onscroll = function() {
  const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;

  // 向下滚动：超过导航栏初始底部位置时，固定到顶部
  if (currentScrollTop > lastScrollTop && currentScrollTop >= navbarInitialThreshold) {
    navbar.classList.add("sticky");
  } 
  // 向上滚动：只有回到导航栏初始位置上方时，才取消固定
  else if (currentScrollTop < lastScrollTop && currentScrollTop < navbarInitialThreshold - navbar.offsetHeight) {
    navbar.classList.remove("sticky");
  }

  // 更新上一次滚动位置
  lastScrollTop = currentScrollTop;
};

逻辑说明 #

1. 预存初始阈值：提前计算导航栏初始底部对应的页面滚动位置，避免导航栏变为fixed后offsetTop变化导致的判断错误。
2. 区分滚动方向：通过对比当前与上一次滚动位置，判断是向上还是向下滚动。
3. 精准触发条件：
   • 向下滚动时，只有滚动超过导航栏初始底部位置，才固定导航栏到顶部；
   • 向上滚动时，只有当页面滚动回导航栏初始位置上方，才让导航栏回到初始底部，否则保持固定状态。

内容的提问来源于stack exchange，提问作者Dev