Question

我对浮动标头使用CSS位置粘性，某些移动设备在滚动时会显示一个小的间隙，介于“ element_b”和“ element_c”之间约1像素

#element_a{
    width: 100%;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
}
#element_b{
    width: 100%;
    position: -webkit-sticky !important;
    position: sticky !important;
}

<script>
   $("#element_b").css("top", $('#element_a').height());
</script>

<div id="element_a">Sticky header A</div>
<div id="element_b">Sticky header B</div>
<div id="element_c">Content After Sticky header C</div>

有人对此有想法吗？谢谢

Answer 1

您可以为此使用媒体查询，如果您的差距很小（即1px），则可以使用CSS媒体查询#element_c并将其拉高-1px。因为根据您的代码，您可以将任何CSS代码应用于#element_c。我正在发布一个屏幕尺寸以供参考，在这种屏幕尺寸中您遇到了根据该屏幕尺寸编写代码的问题。

@media only screen and (min-width: 768px) {
  #element_c {
    margin-top:-1px;
  }
}

CSS粘性标头的间隙问题（仅适用于移动设备）

1 个答案: