Question

我正在一个最小宽度为1124px的页面中工作，因此每次浏览器小于1124px时，页面的内容都可能会被水平扫描，而不是响应过渡。

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

body {
 min-width: 1124px;
}

header {
 position: fixed;
}

Answer 1

您可以使用position: sticky;使其保持固定在顶部，但允许水平滚动，如下所示：

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

示例：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Verticaly固定标题

1 个答案: