1caa9448c0
添加项目基础架构，包括字体管理、文档系统、API路由和UI组件。实现字体预览、收藏、搜索和文档浏览功能。 - 初始化Next.js项目结构和配置 - 添加字体管理API路由和数据库模型 - 实现字体预览和收藏功能 - 添加文档系统支持MDX内容 - 创建核心UI组件库 - 配置Redux状态管理和持久化 - 添加Storybook组件文档 - 实现响应式布局和主题系统 - 添加测试工具和CI配置 - 完善开发环境和构建配置
135 lines
No EOL
4.3 KiB
HTML
135 lines
No EOL
4.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Float Menu Test</title>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
.test-nav {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 60px;
|
||
background: rgba(238, 238, 238, 1);
|
||
z-index: 1000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.test-nav.hidden {
|
||
transform: translateY(-100%);
|
||
}
|
||
.test-nav.visible {
|
||
transform: translateY(0);
|
||
}
|
||
.static-nav {
|
||
height: 180px;
|
||
background: rgba(238, 238, 238, 0.6);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
.content {
|
||
height: 2000px;
|
||
padding: 20px;
|
||
background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
|
||
}
|
||
.debug {
|
||
position: fixed;
|
||
top: 70px;
|
||
right: 20px;
|
||
background: white;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
font-size: 12px;
|
||
z-index: 1001;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="floatNav" class="test-nav hidden">
|
||
<h3>悬浮导航菜单 (应该在滚动时显示)</h3>
|
||
</div>
|
||
|
||
<div class="static-nav">
|
||
<h3>静态导航菜单 (向下滚动150px后悬浮菜单应该出现)</h3>
|
||
</div>
|
||
|
||
<div class="debug" id="debug">
|
||
<div>滚动位置: <span id="scrollY">0</span>px</div>
|
||
<div>静态导航位置: <span id="navTop">0</span>px</div>
|
||
<div>悬浮菜单状态: <span id="floatStatus">隐藏</span></div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<h2>测试内容</h2>
|
||
<p>向下滚动测试悬浮菜单功能...</p>
|
||
<p>当静态导航菜单滚动到视窗顶部上方150px时，悬浮菜单应该显示。</p>
|
||
<p>继续滚动以测试功能...</p>
|
||
|
||
<div style="margin-top: 500px;">
|
||
<h3>中间内容</h3>
|
||
<p>这里是一些中间内容，用于测试滚动效果。</p>
|
||
</div>
|
||
|
||
<div style="margin-top: 500px;">
|
||
<h3>底部内容</h3>
|
||
<p>这里是底部内容。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const floatNav = document.getElementById('floatNav');
|
||
const staticNav = document.querySelector('.static-nav');
|
||
const scrollYSpan = document.getElementById('scrollY');
|
||
const navTopSpan = document.getElementById('navTop');
|
||
const floatStatusSpan = document.getElementById('floatStatus');
|
||
|
||
let isFloatVisible = false;
|
||
|
||
function updateFloatNav() {
|
||
const scrollY = window.scrollY;
|
||
const navRect = staticNav.getBoundingClientRect();
|
||
const navTop = navRect.top;
|
||
|
||
// 更新调试信息
|
||
scrollYSpan.textContent = scrollY;
|
||
navTopSpan.textContent = Math.round(navTop);
|
||
|
||
// 判断是否显示悬浮菜单
|
||
const shouldShow = navTop < -150;
|
||
|
||
if (shouldShow && !isFloatVisible) {
|
||
floatNav.classList.remove('hidden');
|
||
floatNav.classList.add('visible');
|
||
isFloatVisible = true;
|
||
floatStatusSpan.textContent = '显示';
|
||
console.log('显示悬浮菜单', { scrollY, navTop });
|
||
} else if (!shouldShow && isFloatVisible) {
|
||
floatNav.classList.remove('visible');
|
||
floatNav.classList.add('hidden');
|
||
isFloatVisible = false;
|
||
floatStatusSpan.textContent = '隐藏';
|
||
console.log('隐藏悬浮菜单', { scrollY, navTop });
|
||
}
|
||
}
|
||
|
||
// 监听滚动事件
|
||
window.addEventListener('scroll', updateFloatNav);
|
||
|
||
// 初始化
|
||
updateFloatNav();
|
||
|
||
console.log('悬浮菜单测试页面已加载');
|
||
</script>
|
||
</body>
|
||
</html> |
