React中如何实现搜索栏初始居中、滚动时吸附在页面顶部？

API 探路者

2026-10-2

实现方案

问题原因

你当前代码的搜索栏直接显示在顶部，是因为没有给搜索栏设置初始的顶部偏移距离，position: sticky搭配top:0的规则会让元素在没有上方间距的前提下直接贴在视口顶部，无法呈现初始居中的效果。

解决方法

纯CSS即可实现需求，不需要额外编写JS逻辑，性能更好也适配React技术栈：

给搜索栏添加上边距，通过calc动态计算刚好让搜索栏垂直居中在初始视口的间距：calc(50vh - 25px)，其中50vh是视口高度的一半，25px是你设置的50px高度搜索栏的一半，刚好实现垂直居中
补充z-index规则，避免滚动时其他元素覆盖搜索栏

调整后的完整代码

.searchLink {
  flex-grow: 1;
  /* 调整上边距实现初始垂直居中 */
  margin: calc(50vh - 25px) auto 11px auto;
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--matterColorNegative);
  border: 1px solid #dddddd;
  border-radius: 50px;
  height: 50px;
  background-color: #ffffff;
  position: sticky;
  top: 0px;
  /* 避免被其他元素覆盖 */
  z-index: 99;
  justify-content: center;

  @media (--viewportLarge) {
    max-width: 700px;
    padding-left: 0;
  }
}