周末折腾记：那些让网页焕然一新的小技巧

Moefun

探索技术与生活的美好，记录每一次灵感的绽放。

公告

欢迎来到我的个人博客！这里记录了我的技术学习与生活点滴。目前正在进行博客升级和重构，如有访问报错请谅解~

了解更多

分类

标签

787 字

4 分钟

周末折腾记：那些让网页焕然一新的小技巧

2026-04-24

技术

CSS

/

JavaScript

/

前端

/

周末折腾

周末又来了。窗外不知道是晴还是阴，总之窗帘是拉着的——这才是写代码的正确氛围。

今天不想写什么宏大的话题，就分享几个最近在折腾这个博客时发现的小技巧，轻量、实用、五分钟能上手。

一、只用 CSS 实现的”滚动进入”动画#

以前要做滚动动画，要么引入 IntersectionObserver，要么抱一个动画库。但现在 CSS 已经原生支持了：

1
@keyframes fade-in-up {
2
  from {
3
    opacity: 0;
4
    transform: translateY(1.5rem);
5
  }
6
  to {
7
    opacity: 1;
8
    transform: translateY(0);
9
  }
10
}
11

12
.animate-on-scroll {
13
  /* 关键属性：滚动驱动动画 */
14
  animation: fade-in-up 0.6s ease forwards;
15
  animation-timeline: view();
16
  animation-range: entry 0% entry 30%;
17
}

直接给需要的元素加上 animate-on-scroll 类就好了，不需要写任何 JavaScript。目前 Chrome 和 Edge 已经全面支持，Safari 也跟上了。

二、用 `clamp()` 告别媒体查询断点#

响应式字体大小一直是个麻烦事，写一堆 @media 查询还要手动调各个断点。clamp() 是个更优雅的方案：

1
/* 语法：clamp(最小值, 理想值, 最大值) */
2
/* 理想值可以用 vw 单位，让字体随视口平滑缩放 */
3

4
h1 {
5
  /* 最小 1.75rem，最大 3rem，中间随视口流体缩放 */
6
  font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
7
}
8

9
.container {
10
  /* 同样适用于间距 */
11
  padding: clamp(1rem, 5vw, 3rem);
12
}

这样做的好处是字体大小在任何屏幕尺寸下都能平滑过渡，彻底不需要手动写断点。

三、`sessionStorage` 实现的”已读状态”记忆#

在给这个博客加公告关闭功能的时候，顺手用 sessionStorage 记录了关闭状态。相比 localStorage，sessionStorage 在关闭标签页后自动清空，很适合这种”本次访问有效”的临时记忆场景：

1
function setupAnnouncement() {
2
  const closeBtn = document.getElementById('close-btn');
3
  const widget = document.querySelector('.announcement-widget');
4

5
  if (!widget) return;
6

7
  // 检查本次会话是否已经关闭过
8
  if (sessionStorage.getItem('announcement-closed') === 'true') {
9
    widget.style.display = 'none';
10
    return;
11
  }
12

13
  closeBtn?.addEventListener('click', () => {
14
    widget.style.display = 'none';
15
    // 记录到 sessionStorage，页面切换后依然有效
16
    sessionStorage.setItem('announcement-closed', 'true');
17
  });
18
}
19

20
setupAnnouncement();

对比一下几种存储方式的适用场景：

存储方式	生命周期	适合场景
`sessionStorage`	关闭标签页后清空	本次访问的临时状态
`localStorage`	永久保存（手动清除）	用户偏好、主题设置
`Cookie`	自定义过期时间	需要服务端读取的场景

四、让导航栏”透明→实色”的滚动效果#

这也是最近刚做的。效果是页面最顶端时导航栏透明，往下滚动就会出现背景色。核心逻辑只需要监听 scroll 事件：

1
function initNavbarScroll() {
2
  const navbar = document.getElementById('navbar-inner');
3
  if (!navbar) return;
4

5
  function onScroll() {
6
    if (window.scrollY > 20) {
7
      navbar.classList.remove('bg-transparent');
8
      navbar.classList.add('nav-solid'); // 加上背景
9
    } else {
10
      navbar.classList.add('bg-transparent');
11
      navbar.classList.remove('nav-solid');
12
    }
13
  }
14

15
  onScroll(); // 初始执行一次
16
  window.addEventListener('scroll', onScroll, { passive: true });
17
}
18

19
initNavbarScroll();