Question

我将网站的导航栏设置为仅在滚动时粘在顶部。但它在safari上默认保持在顶部。这是我的网站：krishagric.com

如何修复它以像其他浏览器一样工作。这是navbar 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;

默认情况下，bootstrap导航栏在safari浏览器中粘到顶部

1 个答案: