滚动收缩Navbar页面跳转时菜单元素移位问题求助

问题根源 #

1. 页面加载时header默认添加了shrink类，但初始滚动位置scrollY=0，脚本会立即移除该类，触发从收缩到正常状态的过渡动画，导致菜单出现移位。
2. 使用float:right实现导航居右，页面渲染时易出现布局偏移的闪烁问题。

解决方案 #

方案1：修正初始类与脚本逻辑

1. 移除HTML中header的默认shrink类，让页面加载时默认显示非收缩状态：

<!-- 修改前 -->
<header id="main-header" class="shrink">
<!-- 修改后 -->
<header id="main-header">

2. 优化脚本逻辑，页面加载时先根据滚动位置设置正确的类，避免初始状态冲突：

var windowElement = window;
var mainHeader = document.getElementById("main-header");

// 统一处理header状态的函数
function setHeaderState() {
    if (windowElement.scrollY > 100) {
        mainHeader.classList.add("shrink");
    } else {
        mainHeader.classList.remove("shrink");
    }
}

// 页面加载时立即执行，初始化状态
setHeaderState();
// 监听滚动事件更新状态
windowElement.addEventListener("scroll", setHeaderState);

方案2：用Flex布局替代Float（更稳定的布局）

替换原有导航相关的CSS，使用Flex实现logo居左、菜单居右，彻底避免浮动带来的渲染问题：

/* 替换原header和nav的CSS代码 */
header {
    padding: 0 2em;
    position: fixed;
    top: 0;
    background: #333;
    border-bottom: 2px solid #ccc;
    width: 100%;
    height: 6.5em;
    transition: all .8s ease-in-out;
    /* 使用Flex布局 */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header #logo {
    width: 100px;
    height: 100px;
    transition: width 0.8s ease-in-out, height 0.8s ease-in-out;
}

nav ul {
    /* 使用Flex排列菜单 */
    display: flex;
    gap: 1em; /* 替代原有的margin-left:1em */
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none;
    line-height: 6em;
    transition: all .8s ease-in-out;
}

/* 收缩状态的样式保持不变 */
header.shrink {
    height: 4.5em;
}

header.shrink nav ul li {
    line-height: 4em;
}

header.shrink #logo {
    width: 70px;
    height: 70px;
}

效果说明 #

• 移除初始shrink类后，页面加载时直接渲染非收缩状态，避免不必要的过渡动画。
• Flex布局比浮动更稳定，确保导航元素在页面加载时就处于正确位置，不会出现移位闪烁。
• 页面初始化时执行状态判断，保证刷新或跳转后，header状态与当前滚动位置匹配。

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