实现滚动触发导航固定切换及平滑过渡效果的优化方案咨询

问题场景 #

页面初始加载时导航为非fixed状态，随页面滚动；滚动一定距离后，缩小版导航滑下并固定在顶部；滚动回页面顶部时，固定导航滑上，恢复初始导航。目前通过多个if/else控制类的添加顺序实现了过渡效果，但希望找到更简洁的方案，解决fixed元素过渡的常见问题。

当前实现代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="nav">
  Stuff
</div>
<main>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</main>
</body>

CSS #

#nav {
  background: blue;
 width:100%;
 height:100px;
 color:#fff;
 position:absolute;
 top:0;
}

#nav.sticky-pos {
  position:fixed;
  top:-100px;
}

#nav.sticky-trans {
   transition: 0.3s all ease-out;
}

#nav.sticky-dropdown {
  top:0;
  height:50px;
}

main {
  margin-top:120px;
}
.box {
  background:#ddd;
  height:200px;
  width:100%;
  margin-bottom:20px;
}

JavaScript #

$(document).scroll(function() {
    if ($(document).scrollTop()> 200) { 
      $("#nav").addClass("sticky-pos");
    }  else {
      $("#nav").removeClass("sticky-pos");
    }
    
    if ($(document).scrollTop()> 250) {
            $("#nav").addClass("sticky-trans");
    }  else {
        $("#nav").removeClass("sticky-trans");
    }
    
    if ($(document).scrollTop()> 300) {
            $("#nav").addClass("sticky-dropdown");
    }  else {
        $("#nav").removeClass("sticky-dropdown");
    }
})

优化方案 #

核心思路是合并状态类、用CSS动画替代多条件类切换，彻底解决fixed元素过渡的时序问题：

优化后CSS #

#nav {
  background: blue;
  width: 100%;
  height: 100px;
  color: #fff;
  position: absolute;
  top: 0;
  transition: all 0.3s ease-out; /* 始终保留过渡，避免动态添加类的时序bug */
}

/* 合并固定导航的所有状态样式 */
#nav.sticky {
  position: fixed;
  animation: slideDown 0.3s ease-out forwards;
}

/* 滚动回顶部时的滑出动画 */
#nav.sticky.hidden {
  animation: slideUp 0.3s ease-out forwards;
}

/* 滑入动画 */
@keyframes slideDown {
  from {
    top: -100px;
    height: 100px;
  }
  to {
    top: 0;
    height: 50px;
  }
}

/* 滑出动画 */
@keyframes slideUp {
  from {
    top: 0;
    height: 50px;
  }
  to {
    top: -100px;
    height: 100px;
  }
}

main {
  margin-top: 120px;
}
.box {
  background: #ddd;
  height: 200px;
  width: 100%;
  margin-bottom: 20px;
}

优化后JavaScript #

let lastScrollTop = 0;
$(document).scroll(function() {
  const scrollTop = $(document).scrollTop();
  const $nav = $("#nav");

  if (scrollTop > 300 && scrollTop > lastScrollTop) {
    // 向下滚动超过阈值，显示固定导航
    $nav.removeClass("hidden").addClass("sticky");
  } else if (scrollTop < 200) {
    // 滚动回顶部区域，触发滑出动画
    $nav.addClass("hidden");
    // 动画结束后恢复初始状态
    setTimeout(() => {
      if ($(document).scrollTop() < 200) {
        $nav.removeClass("sticky hidden");
      }
    }, 300);
  }

  lastScrollTop = scrollTop;
});

优化说明 #

1. 合并状态类：把分散的sticky-pos/sticky-trans/sticky-dropdown合并为单个sticky类，减少DOM操作和条件判断，代码更简洁。
2. CSS动画替代阶梯式类切换：用@keyframes定义滑入滑出动画，不再依赖滚动距离的阶梯触发，过渡效果更流畅可控。
3. 监听滚动方向：通过lastScrollTop判断滚动方向，避免快速滚动时的状态闪烁问题。
4. 固定过渡属性：始终保留transition属性，避免动态添加/移除类导致的过渡失效时序问题。

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