Question

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

我玩弄小提琴没有成功：（

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

如果您使用的是引导程序，只需将fixed-top类添加到您的header：

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

否则，对于CSS，标题位置应为"position:fixed;"，宽度应为"width: 100%;"，然后将其他页面内容放置在下面，如小提琴所示：

https://jsfiddle.net/s071hnxL/

Answer 2

position: sticky工作正常。之所以看不到它的效果，是因为position上使用了div（不是可见的文本），并且div的宽度占用了{{ 1}}与其父级的div，在这种情况下为100%。
因此，当水平滚动时，您仍在div内，这将占用可用的整个宽度空间。 br /> 现在，如果您想查看body内的内容而与滚动无关，请将其宽度修改为div.header，它应该可以正常工作。
您可以通过将width: 100vw中的width设置为body并将140%设置为.header
来进行验证祝一切顺利。干杯！

Answer 3

可以在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>

粘性标头在水平滚动时滚动出视线

3 个答案: