【问题标题】:bootstrap navbar sticks to top by default in safari browser默认情况下,在 safari 浏览器中,引导导航栏固定在顶部
【发布时间】:2017-06-29 15:53:47
【问题描述】:

我将网站的导航栏设置为仅在您滚动时停留在顶部。但它在 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>

【问题讨论】:

    标签: html css twitter-bootstrap-3 safari navbar


    【解决方案1】:

    Safari 在这里需要一点额外的爱(名称前缀)。所以给.sticky添加:

    position: -webkit-sticky;

    【讨论】:

      猜你喜欢
      • 2014-06-19
      • 2018-01-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-10-06
      • 1970-01-01
      • 2018-12-12
      • 1970-01-01
      相关资源
      最近更新 更多