html -固定滚动标题

<div class="header">
  <h1>固定滚动标题</h1>
</div>
<div class="content">
  <!-- 页面内容 -->
</div>

.header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #f1f1f1;
  padding: 10px;
}

.content {
  margin-top: 60px; /* 为了避免标题被内容遮挡，给内容添加上边距 */
}

window.onscroll = function() {
  var header = document.querySelector('.header');
  if (window.pageYOffset > 0) {
    header.classList.add('fixed');
  } else {
    header.classList.remove('fixed');
  }
};