如何实现固定定位图片滚动至距底部50-100px时带平滑过渡隐藏

结论是：无法跨浏览器通过纯CSS完全实现该需求。
核心原因是传统CSS没有内置基于页面滚动进度的判断能力：所有固定定位元素的渲染规则都绑定视口静态位置，无法感知“当前滚动位置距离文档底部剩余距离”这个动态状态，自然没法在快到页面底部的时候触发元素隐藏。
虽然最新的CSS滚动驱动动画规范可以在部分Chromium内核浏览器中实现基于滚动进度的状态变化，但该属性目前不被Safari、Firefox等主流浏览器支持，生产环境存在兼容性问题，不推荐作为正式方案。

实现逻辑非常简单：

• 实时计算当前滚动状态下，视口和文档最底部的剩余距离
• 当剩余距离小于设定的阈值（比如80px，正好落在你要求的50-100px区间），就给图片加专属的隐藏类，触发平滑过渡效果
• 滚动位置远离底部时，移除隐藏类让图片平滑显示

第一步：调整基础CSS #

你原来的代码里强制设置了display: block !important，但display属性不支持平滑过渡，需要把隐藏效果换成透明度、位移这类可以过渡的属性：

#project-badge {
    position: fixed;
    right: 40px;
    z-index: 2;
    max-width: 130px;
    bottom: 65px;
    display: block;
    /* 新增平滑过渡规则，避免状态切换突兀 */
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
    transform: translateY(0);
}

/* 新增隐藏状态的类规则 */
#project-badge.is-hidden {
    opacity: 0;
    /* 配合轻微上移的位移，让消失过程更自然 */
    transform: translateY(20px);
    /* 透明状态下禁止点击，避免遮挡下层内容交互 */
    pointer-events: none;
}

注意：如果原来的display: block !important是为了覆盖其他导致图片隐藏的全局样式，可以保留，不要修改这部分的原有逻辑。

第二步：加入滚动判断逻辑 #

下面的JS代码加入了简单的节流优化，避免滚动时频繁计算导致页面卡顿：

// 可根据需求调整的隐藏阈值，单位px
const HIDE_THRESHOLD = 80;
const badgeEl = document.getElementById('project-badge');

// 状态切换的核心逻辑
function updateBadgeVisibility() {
    // 获取文档总高度
    const docTotalHeight = document.documentElement.scrollHeight;
    // 获取当前视口高度
    const viewportHeight = window.innerHeight;
    // 获取当前垂直滚动距离
    const currentScrollTop = window.scrollY || document.documentElement.scrollTop;
    // 计算当前视口距离文档底部的剩余距离
    const distanceToPageBottom = docTotalHeight - (currentScrollTop + viewportHeight);

    // 根据距离切换显示状态
    if (distanceToPageBottom < HIDE_THRESHOLD) {
        badgeEl.classList.add('is-hidden');
    } else {
        badgeEl.classList.remove('is-hidden');
    }
}

// 滚动事件加节流，降低性能消耗
let scrollThrottleTimer = null;
window.addEventListener('scroll', () => {
    if (scrollThrottleTimer) return;
    scrollThrottleTimer = setTimeout(() => {
        updateBadgeVisibility();
        scrollThrottleTimer = null;
    }, 100);
});

// 页面初次加载、窗口尺寸变化时重新计算状态，避免初始显示异常
window.addEventListener('load', updateBadgeVisibility);
window.addEventListener('resize', updateBadgeVisibility);

可选优化点 #

• 可以根据实际需求调整阈值，比如改成60px或者100px
• 过渡时长可以根据体验调整，通常0.2s-0.5s的过渡既不会太快显得突兀，也不会太慢让用户察觉卡顿
• 可以调整隐藏时的位移幅度，比如改成上移30px，让消失的动效更自然

内容的提问来源于stack exchange，提问作者winston