ブートストラップナビゲーションバーが

Question

Safariブラウザのデフォルトでトップにこだわる私はあなたがスクロールトップに固執するだけに私のサイトのナビゲーションバーを設定します。しかし、それはサファリではデフォルトで最上位にとどまります。ここに私のサイトです：krishagric.com

safari browser image

私は他のブラウザのように動作するようにそれを修正するにはどうすればよいです。ここ は、ナビゲーションバーの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;