如何实现网页滚动时搜索栏跟随固定显示的功能

方案1：纯CSS sticky 实现（优先推荐） #

该方案无需编写JS，浏览器原生支持，性能最优，兼容Chrome 56+、Firefox 32+、Safari 13+等主流浏览器。

代码示例 #

.search-bar {
  /* 核心固定属性 */
  position: sticky;
  /* 固定在距离顶部0px的位置，可根据需求调整 */
  top: 0;
  /* 层级设置，避免被其他页面元素遮挡 */
  z-index: 999;
  /* 以下为搜索栏原有样式，可根据需求修改 */
  background: #ffffff;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

常见失效排查 #

• 搜索栏的所有父级元素不能设置overflow: hidden、overflow: auto、overflow: scroll属性，否则会导致sticky失效
• 搜索栏所属的直接父元素高度不能和搜索栏本身高度一致，sticky仅在父元素的可视范围内生效

方案2：JS + fixed 实现（兼容老旧浏览器/复杂场景） #

如果需要兼容IE等不支持sticky的浏览器，或是需要实现「滚动到指定位置才固定」的逻辑，可以使用该方案。

代码示例 #

CSS部分

/* 搜索栏默认样式 */
.search-bar {
  background: #ffffff;
  padding: 12px 16px;
  z-index: 999;
}
/* 搜索栏固定后的样式 */
.search-bar.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* 占位元素样式，避免搜索栏脱离文档流后页面出现高度跳动 */
.search-bar-placeholder {
  display: none;
}

JS部分

const searchBar = document.querySelector('.search-bar')
// 生成占位元素，防止页面抖动
const placeholder = document.createElement('div')
placeholder.classList.add('search-bar-placeholder')
placeholder.style.height = searchBar.offsetHeight + 'px'
searchBar.parentNode.insertBefore(placeholder, searchBar)

// 监听滚动事件
window.addEventListener('scroll', () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  const barOriginalTop = searchBar.offsetTop
  
  if (scrollTop >= barOriginalTop) {
    searchBar.classList.add('is-fixed')
    placeholder.style.display = 'block'
  } else {
    searchBar.classList.remove('is-fixed')
    placeholder.style.display = 'none'
  }
})

效果参考 #

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