html - 水平滚动时，粘性标题会滚出 View

Question

我有一个标题，我想在垂直和水平滚动期间都保持粘性。由于标题的高度是动态的，我希望它是粘性的(否则如果我没记错的话我可以使用固定的)。

我玩过一把 fiddle ，但没有成功:(

https://jsfiddle.net/Viktor/39v0gzjh/22/

CSS:

html, body{
  width:100%;
  background-color:red;
  opacity:0.9;
  padding:0;
  margin:0;
}

.header{
  position:sticky;
  top:0;
  left:0;
  background-color:gray;
  height: 100px;
  padding:0;
}

.container{
  display: flex;
}

.child{
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  border: 1px solid #D8D8D8;
  background-color: white;
  font-weight: bold;
  word-wrap: break-word;
}

.bigdiv{
  width:1000px;
  height:1000px;
}

HTML:

<div class="header">
  This is my sticky header
</div>

<div class="container">
  <div class="child">
  child1
  </div>
  <div class="child">
  child2
  </div>
  <div class="child">
  child3
  </div>
  <div class="child">
  child4
  </div>
  <div class="child">
  child5
  </div>
  <div class="child">
  child6
  </div>
  <div class="child">
  child7
  </div>
  <div class="child">
  child8
  </div>
  <div class="child">
  child9
  </div>
  <div class="child">
  child
  </div>
</div>
<div class="bigdiv">
  Very long div
</div>

Answer 1

如果您使用bootstrap，只需将fixed-top 类添加到您的header:

<div class="header fixed-top">
  This is my sticky header
</div>

否则，使用 css，页眉位置应为 "position:fixed;" 及其宽度 "width: 100%;" 然后将其他页面内容放在下面，如这个 fiddle :

https://jsfiddle.net/s071hnxL/