在Safari浏览器中，引导导航栏默认会停留在顶部

Question

我将网站的导航栏设置为仅在滚动时停留在顶部。 但默认情况下，它在野生动物园中排名最高。 这是我的网站： krishagric.com

野生动物园浏览器图片

我如何修复它使其像其他浏览器一样工作。 这是导航栏html和CSS代码：

 .navbar { background-color: white; border: none; margin: none; } .sticky { position: sticky; top: 5px; /* When the element reaches top: 5px, it becomes fixed. */ z-index: 100; } 

 <nav class="navbar navbar-default navbar-fixed-top sticky" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="consultation.html">Consultation</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div><!--/.container-fluid --> </nav> 

Answer 1

Safari在这里需要一点额外的爱（名称前缀）。 因此，添加.sticky ：

position: -webkit-sticky;