通过监听页面滚动并动态计算页脚距视口底部的距离，可让固定定位的页脚随滚动进度平滑淡入，实现与内容层自然叠加的视差式交互效果。
通过监听页面滚动并动态计算页脚距视口底部的距离，可让固定定位的页脚随滚动进度平滑淡入，实现与内容层自然叠加的视差式交互效果。
要实现固定页脚（position: fixed; bottom: 0）随页面滚动渐显的视觉效果，核心在于将页脚的 opacity 值与用户滚动到底部的“接近程度”建立线性映射关系——而非简单地在某个临界点触发显示/隐藏。
✅ 实现原理
页脚的可见性应取决于 文档底部距离当前视口底部的剩余滚动距离（即 scrollBottom）：
const scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
- 当用户尚未开始滚动时：scrollBottom 最大 → 页脚完全透明（opacity = 0）；
- 当用户滚动至文档末尾（scrollBottom === 0）：页脚完全不透明（opacity = 1）；
- 中间状态按比例插值：opacity = 1 - scrollBottom / footerHeight。
⚠️ 注意：该公式要求 scrollBottom 不为负数。实际应用中需做边界限制，避免 opacity 超出 [0, 1] 范围：
const opacity = Math.max(0, Math.min(1, 1 - scrollBottom / $(".outro").height()));? 完整示例代码（含防抖优化建议）
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
header {
background: #ff6b9d;
height: 100px;
width: 100%;
padding: 20px;
position: fixed;
top: 0;
z-index: 2;
transition: opacity 75ms linear;
}
.container {
background: #fff;
padding: 30px;
padding-top: 140px;
padding-bottom: 140px; /* 预留页脚空间 */
position: relative;
z-index: 1;
}
footer {
width: 100%;
height: 100px;
background: #2a58f7;
position: fixed;
bottom: 0;
z-index: 0;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 75ms linear;
}
</style>
</head>
<body>
<header class="intro"><h1>Header</h1></header>
<div class="container">
<h1>Content Area</h1>
<!-- 此处插入足够长的内容以支持滚动 -->
<p>Lorem ipsum dolor sit amet...</p>
</div>
<footer class="outro"><h1>Footer</h1></footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
const $footer = $(".outro");
const footerHeight = $footer.height();
// 使用 requestAnimationFrame 优化滚动性能（推荐替代频繁 scroll 事件）
let ticking = false;
$(window).on('scroll', function() {
if (!ticking) {
requestAnimationFrame(function() {
const scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
const opacity = Math.max(0, Math.min(1, 1 - scrollBottom / footerHeight));
$footer.css("opacity", opacity);
// 同步处理页眉（可选）
const headerOpacity = 1 - $(window).scrollTop() / $('.intro').height();
$(".intro").css("opacity", Math.max(0, Math.min(1, headerOpacity)));
ticking = false;
});
ticking = true;
}
});
});
</script>
</body>
</html>? 关键注意事项
- CSS 层级与定位：确保页脚 z-index 低于内容区（如设为 0），且内容容器预留足够 padding-bottom（≥ 页脚高度），防止文字被遮挡；
- 响应式适配：页脚高度应使用 height 或 min-height 明确定义（避免依赖内容撑开），否则 $(".outro").height() 可能返回 0；
- 性能优化：原生 scroll 事件高频触发，建议结合 requestAnimationFrame 或节流（throttle）避免重绘卡顿；
- 无障碍友好：渐显效果不影响页脚的可访问性（仍保持语义化 <footer> 标签及焦点可达性）。
该方案与页眉淡出逻辑对称统一，可灵活组合构建沉浸式滚动叙事体验，适用于单页应用、作品集或营销落地页等场景。
