/** * 全局顶部菜单吸顶行为覆盖 * * 原始 main.min.css / main.min.js 逻辑： * - 向下滚动超过 header 高度 → 给 .site-header 加 .navbar-now * - .site-header.navbar-now 被 translateY(-80px) 隐藏掉（用户反馈"所有页面都不显示"的根因） * - 向上滚动一小段 → 切 .navbar-sticky（position:fixed 显现） * * 覆盖后目标： * - 不管上滚 / 下滚，只要滚过 header 高度，顶部菜单就始终以 fixed 方式悬浮在顶层 * - 同时保留 navbar-sticky / scrolled 类叠层效果（阴影 + 金色 1px 底边 + 玻璃拟态） * - 兼容 ripro 原生 .header-transparent body class（正文滚动后自动从透明切换回深色/浅色悬浮条） * - 兼容我们新增的 .has-transparent-header + .site-header--transparent 首页深色 Hero 场景 * - 兼容暗色主题 [data-bs-theme=dark] * - 兼容移动端（<991.98px）汉堡菜单布局，悬浮时不挤压菜单 */ /* ========= 1) 核心覆盖：.navbar-now 不再隐藏，直接 fixed 吸顶 ========= */ .site-header.navbar-now { position: fixed !important; left: 0; right: 0; top: 0; -webkit-transform: translateY(0) !important; transform: translateY(0) !important; -webkit-box-shadow: 0 10px 28px rgba(26, 23, 48, 0.08), 0 1px 0 #f5c12e !important; box-shadow: 0 10px 28px rgba(26, 23, 48, 0.08), 0 1px 0 #f5c12e !important; background-color: rgba(255, 255, 255, 0.90); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); -webkit-transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; z-index: 1030; } /* 避免 backdrop-filter 老浏览器降级，退化为纯白底 */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header.navbar-now { background-color: #ffffff; } } /* ========= 2) navbar-sticky 视觉跟 navbar-now 统一 ========= */ .site-header.navbar-sticky { -webkit-box-shadow: 0 10px 28px rgba(26, 23, 48, 0.08), 0 1px 0 #f5c12e !important; box-shadow: 0 10px 28px rgba(26, 23, 48, 0.08), 0 1px 0 #f5c12e !important; background-color: rgba(255, 255, 255, 0.90); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); -webkit-transition: background-color 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, box-shadow 0.3s ease; z-index: 1030; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header.navbar-sticky { background-color: #ffffff; } } /* ========= 3) 兼容 ripro 原生 body.header-transparent ========= * * main.min.css 原本： * .header-transparent .site-header:not(.navbar-sticky) → 透明 + 白字 * 这个规则的 NOT(.navbar-sticky) 在 .navbar-now 但没 sticky 时仍会命中， * 导致正文往下滚动后（此时 header 应该变成悬浮条）文字白、背景透，非常难看。 * 所以当 .navbar-now 或 .scrolled 任一命中时，强制终止透明状态。 */ body.header-transparent .site-header.navbar-now, body.header-transparent .site-header.navbar-sticky, body.header-transparent .site-header.scrolled { background-color: rgba(255, 255, 255, 0.92) !important; -webkit-box-shadow: 0 10px 28px rgba(26, 23, 48, 0.08), 0 1px 0 #f5c12e !important; box-shadow: 0 10px 28px rgba(26, 23, 48, 0.08), 0 1px 0 #f5c12e !important; color: #2b271b !important; -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); } body.header-transparent .site-header.navbar-now .navbar .nav-list > .menu-item > a, body.header-transparent .site-header.navbar-now .navbar .actions .action-btn, body.header-transparent .site-header.navbar-now .navbar .action-hover-menu .avatar-warp, body.header-transparent .site-header.navbar-sticky .navbar .nav-list > .menu-item > a, body.header-transparent .site-header.navbar-sticky .navbar .actions .action-btn, body.header-transparent .site-header.navbar-sticky .navbar .action-hover-menu .avatar-warp, body.header-transparent .site-header.scrolled .navbar .nav-list > .menu-item > a, body.header-transparent .site-header.scrolled .navbar .actions .action-btn, body.header-transparent .site-header.scrolled .navbar .action-hover-menu .avatar-warp { color: #2b271b !important; } body.header-transparent .site-header.navbar-now .navbar .nav-list > .menu-item.current-menu-item > a, body.header-transparent .site-header.navbar-sticky .navbar .nav-list > .menu-item.current-menu-item > a, body.header-transparent .site-header.scrolled .navbar .nav-list > .menu-item.current-menu-item > a { color: #f5c12e !important; } /* ========= 4) 兼容首页深色 IT Hero 透明 Header（我们自己写的 .has-transparent-header + .site-header--transparent） ========= * * 【按用户 2026-09-03 要求废弃此段】： * 原先会让「透明场景 + navbar-now / navbar-sticky / scrolled」强制变成深色底白字悬浮条， * 但用户要求「只有菜单在第一个模块上未悬浮的时候才需要透明模式颜色」——也就是一旦进入 * navbar-now / navbar-sticky / scrolled 任一状态（已经是吸顶条，不在 Hero 上）， * 全部要回到「默认吸顶条」（usk1-navbar.css 1/2/5 定义的：浅色玻璃底 + 黑字 + 金色底边， * 暗色主题下另有覆盖）。因此不再对 .has-transparent-header 的悬浮状态做任何覆盖， * 让它跟普通页面走同样的默认吸顶条逻辑。 */ /* ========= 5) 暗色主题（[data-bs-theme=dark]）统一悬浮条底色 ========= */ [data-bs-theme=dark] .site-header.navbar-now, [data-bs-theme=dark] .site-header.navbar-sticky, [data-bs-theme=dark] .site-header.scrolled { background-color: rgba(25, 27, 29, 0.88); color: #a1a1a8 !important; -webkit-box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 1px 0 #f5c12e !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 1px 0 #f5c12e !important; } [data-bs-theme=dark] .site-header.navbar-now .navbar .nav-list > .menu-item > a, [data-bs-theme=dark] .site-header.navbar-sticky .navbar .nav-list > .menu-item > a, [data-bs-theme=dark] .site-header.scrolled .navbar .nav-list > .menu-item > a, [data-bs-theme=dark] body.header-transparent .site-header.navbar-now .navbar .nav-list > .menu-item > a, [data-bs-theme=dark] body.header-transparent .site-header.navbar-sticky .navbar .nav-list > .menu-item > a { color: #a1a1a8 !important; } [data-bs-theme=dark] .site-header.navbar-now .navbar .nav-list > .menu-item.current-menu-item > a, [data-bs-theme=dark] .site-header.navbar-sticky .navbar .nav-list > .menu-item.current-menu-item > a, [data-bs-theme=dark] .site-header.scrolled .navbar .nav-list > .menu-item.current-menu-item > a { color: #f5c12e !important; } /* ========= 6) 移动端（<991.98px）汉堡菜单：悬浮不被遮挡 ========= */ @media (max-width: 991.98px) { .site-header.navbar-now, .site-header.navbar-sticky, .site-header.scrolled { z-index: 1045; } /* 底部 m-navbar 存在时，首页移动端点击汉堡菜单不要被 m-navbar 遮挡（汉堡菜单是 absolute/fixed in nav） */ .m-navbar + .canvas-open .site-header.navbar-now, body .site-header.navbar-now ~ .m-navbar { /* 保持底部导航显示在最底层，避免盖过 header 展开的全屏菜单 */ } } /* 防止 prefers-reduced-motion 用户遇到抖动 */ @media (prefers-reduced-motion: reduce) { .site-header.navbar-now, .site-header.navbar-sticky, .site-header.scrolled { -webkit-transition: none; transition: none; } }