feat: 导航栏滚动时半透明毛玻璃效果
All checks were successful
continuous-integration/drone/push Build is passing

- 顶部时完全透明
- 滚动 >10px 后渐变为半透明毛玻璃 (0.75 透明度 + blur)
- CSS transition 平滑过渡
This commit is contained in:
yiqiu
2026-03-18 19:56:16 +08:00
parent a1c89ddb87
commit a49759949d
2 changed files with 23 additions and 5 deletions

View File

@@ -76,11 +76,19 @@ body {
left: 0;
width: 100%;
z-index: 9999;
/* 深色毛玻璃 Header与下拉菜单统一风格 */
background: rgba(10, 12, 22, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}
/* 滚动后变半透明毛玻璃 */
.nav-shadow.scrolled {
background: rgba(10, 12, 22, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}
.nav-header {

View File

@@ -126,6 +126,16 @@ $(function () {
location.href = url;
};
function initHeader() {
// 滚动时导航栏变半透明毛玻璃
var navShadow = document.querySelector('.nav-shadow');
window.addEventListener('scroll', function () {
if (window.scrollY > 10) {
navShadow.classList.add('scrolled');
} else {
navShadow.classList.remove('scrolled');
}
});
let showIndex = 0;
let hoverTimer = null;
let leaveTimer = null;