网页下拉时将搜索栏固定的代码

以下是一个简单的实现方法，使用CSS的position属性将搜索栏固定在屏幕顶部：

HTML：

<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">新闻</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
  <div class="search">
    <input type="text" placeholder="搜索...">
    <button>搜索</button>
  </div>
</header>

<main>
  <!-- 页面内容 -->
</main>

CSS：

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 20px;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.search input {
  width: 70%;
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-size: 16px;
}

.search button {
  width: 20%;
  height: 40px;
  margin-left: 10px;
  border: none;
  border-radius: 20px;
  background-color: #f00;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

注意，这个方法只适用于搜索栏比较简单的情况。如果搜索栏包含复杂的交互功能，那么需要使用JavaScript来实现。