如何使搜索栏即使在滚动时也能浮动或停留在屏幕上？

<div id="search-bar">
  <!-- 搜索栏内容 -->
</div>
<div id="content">
  <!-- 页面内容 -->
</div>

#search-bar {
  position: static; /* 初始状态下搜索栏的position属性 */
  /* 其他样式设置 */
}

window.addEventListener('scroll', function() {
  var searchBar = document.getElementById('search-bar');
  var content = document.getElementById('content');
  var searchBarOffsetTop = searchBar.offsetTop; // 获取搜索栏距离文档顶部的距离

  if (window.pageYOffset >= searchBarOffsetTop) {
    searchBar.style.position = 'fixed';
    searchBar.style.top = '0';
  } else {
    searchBar.style.position = 'static';
  }
});