Question

我正在http://www.mimicmuziek.nl完成工作。我在导航栏上使用了bootstrap .sticky-top类，但是当我使用Chrome时，导航条上方似乎有一个微小的1px间隙，我可以看到内容。使用Safari时不会发生。如何解决这个问题的任何想法将不胜感激！

编辑：我刚刚在我女朋友的电脑上试过它，它在那里工作正常

Answer 1

更新：

我发现了这个：https://bugs.chromium.org/p/chromium/issues/detail?id=810352&q=sticky&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

不仅仅是Bootstrap。

https://codepen.io/anon/pen/vdgzdb

.heading{
  background: #ccc;
  height: 50px;
  line-height: 50px;
  margin-top: 10px;
  font-size: 30px;
  padding-left: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

.content {
  height: 50px;
}

<h1>Animals by Alphabet</h1>

<div class="container">
  <div class="heading">A</div>
  <div class="content">American Buffalo</div>
  <div class="content">Aardvark</div>
  <div class="content">Alligator</div>  
  <div class="content">Antelope</div>    

  <div class="heading">B</div>
  <div class="content">Baboon</div>
  <div class="content">Bat</div>
  <div class="content">Blue Bird</div>
  
  <div class="heading">C</div>
  <div class="content">Cat</div>
  <div class="content">Camel</div>
  <div class="content">Chicken</div>  
  <div class="content">Chipmunk</div>    

  <div class="heading">D</div>
  <div>Dog</div>
  <div>Donkey</div>
  <div>Dave</div>  
  <div>Duck</div>      
</div>

当粘贴元素低于其他div时，可以复制它。

当我删除h1元素时，它表现良好。

但是你知道，有时一个元素必须存在。我在img标记下面放了一个粘性元素，出现1px间隙。当我将img设置为某个高度时，它会起作用。

我认为Chrome浏览器存在问题。由于它在iOS上的wkwebview和iOS / macOS上的Safari上表现完美。 Android webview上的1px差距支持闪烁。

Answer 2

我注意到只有当navbar为sticky且Bootstrap Carousel在navbar下滑动时才会发生。希望这能帮助人们调试这个问题。

Chrome中使用Bootstrap粘性导航栏的1px空间

2 个答案: