手机端高级优化总结

2026/9/13大约 6 分钟

手机端高级优化总结

📱 本次优化内容

1. 导航栏滚动隐藏/显示 ✨

效果：

向下滚动时自动隐藏导航栏
向上滚动时自动显示导航栏
在页面顶部（100px内）时总是显示
首页顶部时导航栏透明背景，logo和按钮白色

技术实现：

// 监听滚动事件
function handleScroll() {
  const currentScroll = window.pageYOffset;
  
  if (currentScroll <= 100) {
    // 顶部时总是显示
    document.body.classList.add('at-top');
    header.classList.add('header-visible');
  } else {
    // 向下滚动隐藏，向上滚动显示
    if (currentScroll > lastScrollTop + 10) {
      header.classList.add('header-hidden');
    } else if (currentScroll < lastScrollTop - 10) {
      header.classList.add('header-visible');
    }
  }
}

CSS样式：

.site-header {
  transition: transform 0.3s ease;
}

.site-header.header-hidden {
  transform: translateY(-100%);
}

.site-header.header-visible {
  transform: translateY(0);
}

/* 首页顶部透明 */
body.at-top.home .site-header {
  background: transparent;
  box-shadow: none;
}

2. 文章详情页隐藏侧栏 📄

效果：

文章详情页只显示文章内容
左侧栏和右侧栏完全隐藏
主内容区域全宽显示
专注阅读体验

技术实现：

<!-- baseof.html -->
<body{{ if .IsHome }} class="home"{{ else if .IsPage }}{{ if eq .Type "posts" }} class="single-post"{{ end }}{{ end }}>

CSS样式：

/* 文章详情页隐藏侧栏 */
body.single-post .site-aside-left,
body.single-post .site-aside-right {
  display: none !important;
}

/* 主内容全宽 */
body.single-post .site-main {
  max-width: 100% !important;
  padding: 1rem !important;
}

3. 首页布局优化 🏠

布局顺序（从上到下）：

1. 大图（全屏100vh）
   ↓ 向下滑动
2. 主内容区域（文章列表）
   ↓ 继续滑动
3. 左侧栏（作者、标签等）
   ↓ 继续滑动
4. 右侧栏（目录、相关文章等）
   ↓ 继续滑动
5. 底部栏（版权信息）

特点：

✅ 大图不再占用body的padding-top空间
✅ 大图全屏，导航栏覆盖在上方
✅ 导航栏初始透明，滚动后显示背景
✅ 主内容完整显示后才出现左侧栏
✅ 左侧栏完整显示后才出现右侧栏

📂 文件变更

修改文件

themes/demius/assets/css/_mobile-optimization.css
- 导航栏滚动隐藏/显示样式
- 首页顶部透明导航栏
- 文章详情页隐藏侧栏
- 移除body的padding-top
themes/demius/assets/js/_mobile-navigation.js
- 新增initHeaderScrollBehavior()函数
- 监听滚动事件
- 控制导航栏显示/隐藏
- 添加/移除body类名
themes/demius/assets/js/_simple-pjax.js
- 添加cleanupHeaderScrollBehavior()调用
- 添加initHeaderScrollBehavior()调用
- PJAX兼容
themes/demius/layouts/_default/baseof.html
- body标签添加动态类
- 首页：class="home"
- 文章详情页：class="single-post"

🎯 解决的问题

问题	解决方案
导航栏一直显示遮挡内容	滚动隐藏/显示
首页大图被导航栏遮挡	透明导航栏+移除padding
文章详情页侧栏干扰阅读	隐藏侧栏，全宽显示
侧栏显示顺序不清晰	垂直堆叠：主内容→左→右

🔧 技术要点

1. 滚动监听优化

防抖处理：

let scrollTimer;
window.addEventListener('scroll', function() {
  if (scrollTimer) {
    clearTimeout(scrollTimer);
  }
  scrollTimer = setTimeout(handleScroll, 10);
}, { passive: true });

requestAnimationFrame优化：

function handleScroll() {
  if (isScrolling) return;
  
  isScrolling = true;
  requestAnimationFrame(() => {
    // 滚动处理逻辑
    isScrolling = false;
  });
}

2. 动态Body类名

Hugo模板逻辑：

<body{{ if .IsHome }} class="home"{{ else if .IsPage }}{{ if eq .Type "posts" }} class="single-post"{{ end }}{{ end }}>

类名对应：

home - 首页
single-post - 文章详情页
at-top - 页面顶部（JS动态添加）

3. CSS层级控制

导航栏层级：

.site-header {
  z-index: 9999; /* 最高层级 */
}

.home-hero {
  z-index: 1; /* 大图在下层 */
}

4. PJAX兼容

清理和重新初始化：

// PJAX切换时
cleanupHeaderScrollBehavior();
initHeaderScrollBehavior();

📊 构建结果

✅ Pages: 100
✅ Build time: 2083ms
✅ 无错误，无警告
✅ 服务器：http://localhost:1313

🧪 测试清单

导航栏滚动行为

[ ] 页面顶部时导航栏显示
[ ] 向下滚动时导航栏隐藏
[ ] 向上滚动时导航栏显示
[ ] 首页顶部导航栏透明
[ ] 滚动后导航栏出现背景
[ ] Logo和按钮颜色正确

首页布局

[ ] 大图全屏显示（100vh）
[ ] 向下滚动先看到文章列表
[ ] 文章列表显示完整
[ ] 继续滚动看到左侧栏
[ ] 左侧栏显示完整
[ ] 继续滚动看到右侧栏
[ ] 右侧栏显示完整
[ ] 最后看到底部栏

文章详情页

[ ] 左侧栏完全隐藏
[ ] 右侧栏完全隐藏
[ ] 文章内容全宽显示
[ ] 导航栏滚动行为正常
[ ] 评论区正常显示

PJAX切换

[ ] 首页→文章页侧栏隐藏
[ ] 文章页→首页侧栏显示
[ ] 导航栏行为重新初始化
[ ] body类名正确更新

暗色模式

[ ] 导航栏背景色正确
[ ] 首页透明导航栏正常
[ ] 滚动后背景色正常

✨ 优化效果

用户体验改进

✅ 导航栏不再遮挡内容
✅ 向下滚动时视野更开阔
✅ 需要导航时向上滑动即可
✅ 文章阅读更专注
✅ 首页浏览更流畅

视觉效果改进

✅ 首页大图完全沉浸
✅ 导航栏透明→实体过渡自然
✅ 滚动隐藏/显示动画流畅
✅ 布局层次清晰

性能优化

✅ 滚动监听使用passive模式
✅ requestAnimationFrame优化
✅ 防抖处理减少计算
✅ 阈值判断避免频繁更新

🎨 Butterfly风格完整体验

首页浏览流程

1. 打开首页
   ↓
   全屏大图 + 透明导航栏
   ↓
2. 向下滚动
   ↓
   导航栏显示背景
   ↓
3. 继续滚动
   ↓
   大图滑走，文章列表出现
   ↓
4. 继续滚动
   ↓
   文章列表完整显示
   ↓
5. 继续滚动
   ↓
   左侧栏出现（作者、标签等）
   ↓
6. 继续滚动
   ↓
   右侧栏出现（相关文章等）
   ↓
7. 继续滚动
   ↓
   底部栏出现（版权信息）

文章阅读流程

1. 点击文章卡片
   ↓
   进入文章详情页
   ↓
2. 侧栏自动隐藏
   ↓
   文章内容全宽显示
   ↓
3. 向下滚动阅读
   ↓
   导航栏自动隐藏
   ↓
4. 需要导航时
   ↓
   向上滑动一点
   ↓
5. 导航栏立即出现
   ↓
   点击汉堡按钮打开菜单