滚动时在Header后平滑固定Navbar的技术实现问询

修改思路 #

原代码基于窗口高度计算触发阈值，不符合需求。我们需要以Header元素的实际高度加上50px作为滚动触发点，同时通过CSS过渡实现平滑切换效果。

修改后的jQuery代码 #

$(document).ready(function() {
    // 计算触发固定的滚动距离：Header高度 + 50px
    const triggerOffset = $('header').outerHeight() + 50;

    $(window).on('scroll', function() {
        if ($(window).scrollTop() > triggerOffset) {
            $('.navigation').addClass('fixed');
        } else {
            $('.navigation').removeClass('fixed');
        }
    });
});

配套CSS（实现平滑过渡） #

为了让Navbar固定/取消固定的动作更自然，需要添加过渡动画：

.navigation {
    position: relative;
    transition: all 0.3s ease; /* 平滑过渡效果 */
    /* 自定义导航栏默认样式 */
}

.navigation.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999; /* 确保导航栏在页面上层 */
    background-color: #ffffff; /* 避免透明导致内容重叠 */
    /* 自定义固定后的导航栏样式 */
}

关键说明 #

• 使用outerHeight()获取Header的完整高度（包含内边距、边框），保证触发位置精准
• 用on('scroll')替代bind('scroll')，这是jQuery官方推荐的事件绑定方式
• CSS过渡属性transition让导航栏的定位切换有动画效果，避免生硬跳转

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