如何用CSS实现仅滚动时显示的sticky效果，position属性不生效该如何解决？

一、先排查 position: sticky 不生效的常见原因 #

• 必须给sticky元素设置至少一个边界偏移值：top/right/bottom/left四个属性至少配置一个，比如top: 0，没有偏移值的情况下sticky定位不会触发。
• 父元素不能设置overflow: hidden、overflow: auto或者overflow: scroll，只要父元素的overflow属性不是默认值visible，sticky就会失效。
• 父元素的高度不能和sticky元素高度完全一致：sticky是基于父元素的滚动空间生效的，如果父元素没有多余的滚动预留空间，效果也不会触发。
• 检查同层级是否有浮动元素影响，必要时给父元素添加清除浮动的样式。

二、实现「仅页面滚动时显示」的sticky效果 #

纯CSS无法识别页面滚动状态，需要配合JS实现需求，核心逻辑为监听滚动事件，滚动时显示元素，滚动停止一段时间后自动隐藏，代码示例如下：

/* 基础sticky样式 */
.sticky-element {
  position: sticky;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease; /* 可加过渡动画让显示隐藏更自然 */
}
/* 滚动时触发的显示类 */
.sticky-element.show {
  opacity: 1;
  visibility: visible;
}

let scrollTimer = null
const stickyEl = document.querySelector('.sticky-element')

window.addEventListener('scroll', () => {
  // 滚动时直接显示元素
  stickyEl.classList.add('show')
  // 清空之前的延时计时器
  clearTimeout(scrollTimer)
  // 滚动停止300ms后隐藏元素，时长可自行调整
  scrollTimer = setTimeout(() => {
    stickyEl.classList.remove('show')
  }, 300)
})

如果不需要过渡动画，也可以直接修改display属性实现显示隐藏切换。

内容的提问来源于stack exchange，提问作者Syed Umair Shah Bukhari