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/