div在有滚动条时固定在某个位置

要实现在有滚动条时固定div，可以使用CSS的position: sticky;属性。这个属性会根据用户的滚动动作，将元素固定在某个位置。

下面是一个简单的例子：

HTML部分:

<div class="sticky-container">
  <div class="sticky-header">我是固定的头部</div>
</div>

<div class="content">
  <!-- 这里是你的内容 -->
</div>

CSS部分：

.sticky-header {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; /* 距离顶部的距离 */
  background-color: yellow; /* 背景颜色 */
  padding: 50px; /* 内边距 */
  font-size: 20px; /* 字体大小 */
}

.sticky-container {
  height: 100px; /* 这个高度需要大于.sticky-header的高度，以确保.sticky-header在滚动时固定 */
}

.content {
  height: 1500px; /* 这个高度用来模拟长内容，以便产生滚动条 */
}

.sticky-header将在滚动到顶部距离sticky-container容器顶部100px的位置时固定。在移动设备上，position: sticky;可能不被支持，因此可以添加浏览器前缀-webkit-来增加兼容性。