如何在表格视图中滚动时使搜索栏上移和隐藏？

<div class="container">
  <div class="table">
    <!-- 表格内容 -->
  </div>
  <div class="search-bar">
    <!-- 搜索栏内容 -->
  </div>
</div>

.container {
  width: 100%;
  height: 400px;
  overflow: auto;
  position: relative;
}

.table {
  width: 100%;
  overflow: auto;
}

.search-bar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: #f1f1f1;
}

var container = document.querySelector('.container');
var searchBar = document.querySelector('.search-bar');

container.addEventListener('scroll', function() {
  if (container.scrollTop > searchBar.offsetHeight) {
    searchBar.style.display = 'none';
  } else {
    searchBar.style.display = 'block';
  }
});