Question

我有一个使用bootstrap'fix'固定在页面顶部的菜单。在桌面浏览器中，当用户在页面上下滚动时，按预期保持固定。但是，在iOS中，菜单会从页面中消失（请参阅此简短视频演示 - https://www.youtube.com/watch?v=R4C0GYxarFA）

HTML

<nav data-spy="affix" data-offset-top="0" data-offset-bottom="0" id="navigation" class="btn-group navigation hidden" role="group" aria-label="Navigation">

    <div id="scroller">
     <a href="#page-top" aria-label="Home" role="button" class="btn btn-link page-scroll home-link mobile-reveal internal" title="Home"><span class="glyphicon glyphicon-home"></span><span class="sr-only">Home</span></a>
      <a href="#about" role="button" class="btn btn-link page-scroll internal">About Us</a>
      <a href="#services-jumbo" role="button" class="btn btn-link page-scroll internal">Services</a>
       <a href="#page-top" aria-label="Home" role="button" class="btn btn-link page-scroll home-link mobile-hide internal" title="Home"><span class="glyphicon glyphicon-home"></span><span class="sr-only">Home</span></a>
      <a href="#careers" role="button" class="btn btn-link page-scroll internal">Careers</a>
      <a href="#enquiries" role="button" class="btn btn-link page-scroll  internal">Enquiries</a>
    </div>
  </nav>

SCSS（我已经采用了基本的格式化）：

#navigation {


  position: absolute;
  left:0px;
  top:0px;
  width:100%;
  min-height:35px;
    #scroller {
      position:absolute;
      left:0px;
      width:320px;
      white-space: nowrap;
      overflow-y: hidden;
      overflow-x: scroll;
      overflow-scrolling:auto;
      -webkit-overflow-scrolling: touch;

        .internal {
        display: inline;
       }
     }
   }
#navigation.affix {
  position:fixed;
}

有没有人知道造成这种行为的原因，以及如何解决这个问题？

非常感谢

使用bootstrap Affix的菜单在Safari iOS上消失

0 个答案: