如何在滚动时实现导航栏absolute与fixed定位的平滑过渡？

因为CSS无法对position属性添加动画效果，直接切换absolute和fixed必然会导致突兀的视觉变化。我们可以换个思路，通过保持position一致+动画可过渡属性的方式实现平滑效果，同时解决页面跳动问题。

核心思路 #

始终让导航栏使用position: fixed，通过调整背景透明度、阴影、占位元素高度这些可动画属性，来模拟absolute和fixed的视觉差异；同时添加占位元素，避免导航栏状态切换时页面内容跳动。

修正后的完整代码 #

CSS 代码

/* 导航栏基础样式，默认模拟absolute状态 */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    transition: all 0.5s ease;
    background-color: rgba(255, 255, 255, 0.76);
    box-shadow: none;
    opacity: 0.9;
}

/* 滚动后的fixed状态样式 */
.navbar.fixed {
    background-color: rgb(255, 255, 255);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    opacity: 1;
}

/* 占位元素：解决导航栏固定后页面内容跳动问题 */
.navbar-placeholder {
    height: 0;
    transition: height 0.5s ease;
}

.navbar-placeholder.active {
    height: 60px; /* 高度需与导航栏实际高度一致 */
}

JS 代码

const navbar = document.querySelector('.navbar');
// 创建并插入占位元素
const placeholder = document.createElement('div');
placeholder.classList.add('navbar-placeholder');
navbar.before(placeholder);

window.addEventListener('scroll', function() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    if (scrollTop > 160) {
        navbar.classList.add('fixed');
        placeholder.classList.add('active');
    } else {
        navbar.classList.remove('fixed');
        placeholder.classList.remove('active');
    }
});

关键细节说明 #

1. 避免切换position：全程使用fixed定位，仅通过背景色、阴影、透明度这些支持过渡的属性实现状态变化，视觉过渡自然平滑。
2. 占位元素抵消跳动：导航栏从“跟随页面”变为“固定顶部”时，会脱离文档流导致页面内容上移，占位元素同步调整高度可以完全抵消这个问题。
3. 简化逻辑：原代码中navbar-sticky为未定义类名，已修正为统一的类切换逻辑；如果需要区分上下滚动方向，可重新加入lastScrollTop判断，但需注意类名一致性。

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