From c74a7c2549b4d71b4d3d72a0a4675c0c8d989c98 Mon Sep 17 00:00:00 2001 From: liushuang Date: Sat, 11 Oct 2025 23:27:40 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=BD=91=E7=AB=99=E5=A4=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _config/css/styles.css | 28 ++++++++++++++++++++++++++-- _config/js/header-scroll.js | 35 +++++++++++++++++++++++++++++++++++ _coverpage.md | 18 ++++++++++++++---- _media/svg/home.svg | 1 + index.html | 1 + 5 files changed, 77 insertions(+), 6 deletions(-) create mode 100644 _config/js/header-scroll.js create mode 100644 _media/svg/home.svg diff --git a/_config/css/styles.css b/_config/css/styles.css index 94e95c1..666af0e 100644 --- a/_config/css/styles.css +++ b/_config/css/styles.css @@ -50,6 +50,7 @@ section.cover .cover-main { align-items: center; flex-direction: column; margin: 0; + margin-top: 80px; /* padding: 0px 16px 0; */ } @@ -478,7 +479,7 @@ body .sidebar-toggle span:nth-child(3) { display: flex; justify-content: center; align-items: center; - margin: 0 10%; + margin: 80px 10% 0; /* 添加上边距,避免被固定头部遮挡 */ } /* .luckday-video-skying { @@ -500,9 +501,32 @@ body .sidebar-toggle span:nth-child(3) { .header { display: flex; - justify-content: space-between; width: 100%; padding: 20px 10%; + position: fixed; + top: 0; + left: 0; + background: #ffffffa6; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; + z-index: 1000; +} + +.header-left, .header-right { + display: flex; + align-items: center; +} + +.header-jump { + display: flex; + align-items: center; + margin-right: 28px; +} + +.header-jump img { + width: 22px !important; + height: 32px; + margin-right: 8px; } /* .doc { diff --git a/_config/js/header-scroll.js b/_config/js/header-scroll.js new file mode 100644 index 0000000..2901e4c --- /dev/null +++ b/_config/js/header-scroll.js @@ -0,0 +1,35 @@ +// 等待 docsify 完成页面渲染后执行 +window.$docsify.plugins = [].concat(window.$docsify.plugins || [], function(hook) { + hook.ready(function() { + let lastScrollTop = 0; + let scrolling = false; + + // 创建一个获取 header 的函数 + function getHeader() { + return document.querySelector('.header'); + } + + window.addEventListener('scroll', function() { + if (!scrolling) { + window.requestAnimationFrame(function() { + const header = getHeader(); + if (!header) return; // 如果没有找到 header,直接返回 + + let currentScrollTop = window.pageYOffset || document.documentElement.scrollTop; + + if (currentScrollTop > lastScrollTop && currentScrollTop > 50) { // 添加一个最小滚动距离 + // 向下滚动 + header.style.transform = 'translateY(-100%)'; + } else { + // 向上滚动 + header.style.transform = 'translateY(0)'; + } + + lastScrollTop = currentScrollTop; + scrolling = false; + }); + scrolling = true; + } + }); + }); +}); \ No newline at end of file diff --git a/_coverpage.md b/_coverpage.md index d088e82..40e0a39 100644 --- a/_coverpage.md +++ b/_coverpage.md @@ -1,7 +1,17 @@ - +
+ + +