javascript - 垂直固定表头

Question

我在一个最小宽度为 1124 像素的页面中工作，因此每次浏览器小于 1124 像素时，页面内容都可以水平滚动，而不是响应式过渡。

http://seluno.jp/

我想知道我是否可以只垂直固定标题，所以当浏览器小于1124px时，标题将与其余页面内容一起水平滚动，但当页面垂直滚动时，标题固定在顶。

body {
 min-width: 1124px;
}

header {
 position: fixed;
}

Answer 1

您可以使用 position: sticky; 使其固定在顶部但允许像这样水平滚动:

#header {
  position: sticky;
  top: 0;
  z-index: 1;
}

例子:

body {
  min-width: 1124px;
}

#header {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Just to fill space on screen */
#header {
  width: 100%;
  height: 100px;
  background: linear-gradient(45deg, white, blue);
}
.content {
  min-height: 500px;
}

<div id="header">
  <h1>Header</h1>
</div>
<div class="content">
  <p>Content</p>
</div>