如何在Jetpack Compose中实现滚动时搜索栏固定显示的效果？

方法一：纯CSS固定顶部（始终可见） #

这是最直接的实现方式，用CSS的position: fixed把搜索栏钉在页面顶部，滚动过程中始终保持视野可见。

代码示例：

<!-- HTML结构 -->
<div class="search-bar">
  <input type="text" placeholder="搜索..." />
</div>
<div class="content">
  <!-- 页面主体内容，比如长文本、列表等 -->
</div>

/* CSS样式 */
.search-bar {
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 20px;
  background-color: #ffffff; /* 添加背景色防止内容穿透 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* 可选：添加阴影增强层次感 */
  z-index: 100; /* 确保搜索栏在其他元素上方 */
}

.content {
  padding-top: 60px; /* 值等于搜索栏的总高度，避免主体内容被遮挡 */
}

方法二：滚动到指定位置后固定（按需触发） #

如果需要搜索栏初始随页面滚动，当滚动到页面顶部时才固定，可以结合JavaScript实现这个动态效果：

代码示例：

<!-- HTML结构 -->
<div class="search-bar" id="searchBar">
  <input type="text" placeholder="搜索..." />
</div>
<div class="content">
  <!-- 页面主体内容 -->
</div>

/* CSS样式 */
.search-bar {
  padding: 12px 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  transition: all 0.3s ease; /* 添加平滑过渡动画 */
}

.search-bar.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.content {
  /* 初始无需padding，滚动后通过JS动态设置 */
}

// JavaScript逻辑
const searchBar = document.getElementById('searchBar');
const barOffsetTop = searchBar.offsetTop; // 获取搜索栏初始距离顶部的位置

window.addEventListener('scroll', () => {
  if (window.scrollY >= barOffsetTop) {
    searchBar.classList.add('fixed');
    // 动态给内容添加padding，高度匹配搜索栏实际高度
    document.querySelector('.content').style.paddingTop = `${searchBar.offsetHeight}px`;
  } else {
    searchBar.classList.remove('fixed');
    document.querySelector('.content').style.paddingTop = '0';
  }
});

关键注意事项 #

• 必须设置z-index属性，防止搜索栏被页面其他元素（如弹窗、轮播组件）覆盖。
• 若搜索栏高度随响应式布局变化，方法二中的offsetHeight会自动获取实时高度，适配更灵活。
• 移动端适配时，可使用top: env(safe-area-inset-top)代替固定top值，避免遮挡系统状态栏。

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