如何让固定定位的搜索栏在指定位置停止？需CSS还是JavaScript？

纯CSS无法实现这种动态的定位切换效果，必须结合JavaScript监听滚动事件来控制搜索栏的定位状态。下面是具体实现步骤：

1. 调整HTML结构 #

给Special Offers标题元素添加一个ID，方便JavaScript获取它的位置：

<div id="offers-section" class="offers">Special Offers</div>

2. 修改CSS样式 #

调整搜索栏的基础样式，新增固定定位的类，并准备好绝对定位的状态：

/* 搜索栏基础样式（去掉原fixed定位，让它默认在正常流中） */
.search {
  display: grid;
  padding-top: 2vh;
  justify-content: center;
  grid-template-rows: 1fr 1fr;
  position: relative;
  top: auto;
  left: auto;
  z-index: 2;
}

/* 新增fixed定位类，滚动时固定在视口顶部 */
.search.fixed {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background: white; /* 加背景避免遮挡下方内容 */
  padding: 2vh 0;
}

/* 搜索栏停止时的绝对定位状态 */
.search.stopped {
  position: absolute;
  top: calc(var(--stop-position) - 7vh); /* 7vh是搜索栏高度，可根据实际调整 */
  left: 50%;
  transform: translateX(-50%);
}

3. 添加JavaScript逻辑 #

监听页面滚动，根据滚动位置切换搜索栏的定位状态：

document.addEventListener('DOMContentLoaded', function() {
  const searchBar = document.getElementById('search');
  const offersSection = document.getElementById('offers-section');
  
  // 获取关键位置：搜索栏初始距离顶部的距离，以及停止位置（Special Offers上方）
  const searchInitialTop = searchBar.offsetTop;
  const stopPosition = offersSection.offsetTop;
  const searchHeight = searchBar.offsetHeight;
  
  // 设置CSS变量，供停止状态使用
  document.documentElement.style.setProperty('--stop-position', stopPosition + 'px');

  window.addEventListener('scroll', function() {
    const scrollY = window.scrollY;
    
    if (scrollY >= searchInitialTop && scrollY < stopPosition - searchHeight) {
      // 滚动超过初始位置，但还没到停止位置，切换为fixed
      searchBar.classList.add('fixed');
      searchBar.classList.remove('stopped');
    } else if (scrollY >= stopPosition - searchHeight) {
      // 到达停止位置，切换为absolute固定在Special Offers上方
      searchBar.classList.remove('fixed');
      searchBar.classList.add('stopped');
    } else {
      // 回到初始位置上方，恢复默认状态
      searchBar.classList.remove('fixed');
      searchBar.classList.remove('stopped');
    }
  });
});

关键说明 #

• 当页面滚动到搜索栏离开视口顶部时，搜索栏变为fixed定位，跟随滚动；
• 当滚动到Special Offers区域上方（距离等于搜索栏高度的位置），搜索栏切换为absolute定位，固定在该位置不再移动；
• 向上滚动回到初始区域时，搜索栏恢复正常流中的位置。

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