如何为sticky粘性定位元素添加顶部固定时的底部阴影？

CSS目前没有原生伪类能直接检测position: sticky元素是否处于"粘住"状态，下面给你两种实用的实现方法：

方法一：JavaScript监听滚动（兼容性拉满） #

这种方法适合所有主流浏览器，步骤简单易懂：

1. 先给元素写好基础样式和阴影过渡效果：

#sticky-top {
    position: sticky;
    top: 0;
    z-index: 9999;
    /* 默认阴影完全透明，不显示 */
    box-shadow: 0 2px 4px rgba(0,0,0,0);
    /* 添加过渡动画，让阴影显示/隐藏更平滑 */
    transition: box-shadow 0.3s ease;
}

/* 定义元素"粘住"时的阴影样式类 */
#sticky-top.stuck {
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

2. 添加JavaScript代码监听滚动，实时判断元素状态：

const stickyEl = document.getElementById('sticky-top');

function updateStickyState() {
    const rect = stickyEl.getBoundingClientRect();
    // 当元素顶部碰到视口顶部（top值<=0），说明已经固定
    if (rect.top <= 0) {
        stickyEl.classList.add('stuck');
    } else {
        stickyEl.classList.remove('stuck');
    }
}

// 页面加载时先检查一次状态
window.addEventListener('load', updateStickyState);
// 滚动时实时更新状态
window.addEventListener('scroll', updateStickyState);

方法二：CSS滚动驱动动画（现代浏览器首选） #

如果你的项目只需要支持Chrome 115+、Firefox 107+这类现代浏览器，用纯CSS就能搞定，无需JavaScript：

#sticky-top {
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 2px 4px rgba(0,0,0,0);
    transition: box-shadow 0.3s ease;
    /* 绑定滚动进度到动画 */
    animation: showShadow linear;
    animation-timeline: scroll(root);
    /* 当元素顶部刚碰到视口顶部时触发动画 */
    animation-range: entry 0% cover 0%;
}

@keyframes showShadow {
    to {
        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }
}

这个方法利用CSS新特性自动感知元素是否粘住，触发阴影显示动画，代码更简洁。

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