水平滚动时，粘性标题滚动出视图答案

【问题标题】：Sticky header scrolls out of view when scrolling horizontally水平滚动时，粘性标题滚动出视图
【发布时间】：2019-06-13 17:54:13
【问题描述】：

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

我玩过一个没有成功的小提琴:(

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>

【问题讨论】：

标签： html css sticky

【解决方案1】：

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

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

否则，使用 css 时，标题位置应为 "position:fixed;" 及其宽度为 "width: 100%;"，然后将其他页面内容放在下面，如下所示：

https://jsfiddle.net/s071hnxL/

【讨论】：

这确实是我想要的行为，但正如我所说我不能使用固定的。 header 的高度可以改变，所以我不能设置一个固定的 padding-top/margin-top。我需要标题下面的内容直接出现在下面。

【解决方案2】：

更好的方法是在您的 html 上设置 overflow-x: scroll;。这将解决问题。

请注意，按照规范，粘性在溢出的元素内部不起作用。 This is a known issue

因此，请尝试将 javascript 与 position:fixed

结合使用

$(window).scroll(function() {
  if( $(this).scrollTop() > 0 ) {
    $('.header').addClass('sticky');
  } else {
    $('.header').removeClass('sticky');
  }
});

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

.header {
  width: 100%;
  background-color: gray;
  height: 100px;
  padding: 0;
}

.sticky {
  position:fixed;
  top:0;
  width: 100%;
  left:0;
}

.pt-100{
  padding-top: 100px;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

【讨论】：

这是朝着正确方向迈出的一步。问题是当设置溢出时：滚动滚动条被禁用。它不明白它的内容在视口之外。检查 DOM 时，body 只是视口的宽度，而 div.bigdiv 是 1000px 宽。怎么来的？身体不应该扩大到它最宽的孩子的宽度吗？
@ViktorEriksson 取决于您的用例。如果您的布局是设计将引导用户完全导航。使用水平滚动来限制身体内最宽的孩子更有意义。

【解决方案3】：

position: sticky 工作正常。您无法看到它的效果的原因是因为position 应用在div（不是可见文本）和div 的宽度，它占用了其父div 的100%，在这种情况下是body。
所以当你水平滚动时，你仍然在 div 里面，它占用了整个可用的宽度空间。
现在，如果您想查看div.header 中的内容，而不管滚动如何，请将其宽度修改为width: 100vw，它应该可以正常工作。
您可以通过将body 的width 设置为140% 并将.header 设置为100vw 来进行验证
一切顺利。干杯！

【讨论】：