贴上的顶部导航栏覆盖锚的内容

这是一个着陆页，带有固定导航栏和锚内容，使用bootstrap scrollspy和affix。我通过数据属性在顶部导航栏上添加了词缀。一切都运行良好，除了贴上顶部导航栏覆盖内容的顶部。贴上的顶部导航栏覆盖锚的内容

这是怎么回事，在这一刻：

这是应该的：

导航栏代码：

<!-- navbar section --> 

<nav id="navbar-scrollspy" class="navbar navbar-default" data-spy="affix" data-offset-top="58" data-offset-bottom="200"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div id="navbar" class="collapse navbar-collapse" aria-expanded="false" style="height: 1px;"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#first_round"><strong>ГЛАВНАЯ</strong></a></li> 
       <li><a href="#second_round">КАК ЭТО <strong>РАБОТАЕТ</strong></a></li> 
       <li><a href="#third_round">КАК ПОЛУЧИТЬ <strong>ЗАЙМ</a></strong></li> 
       <li><a href="#fourth_round">КАК ВЕРНУТЬ <strong>ЗАЙМ</a></strong></li> 
       <li><a href="#fifth_round">ОТЗЫВЫ <strong>О НАС</a></strong></li> 
      </ul> 
     </div> 
    </div> 
</nav>

这里是活生生的例子：http://zaim.wvb.io/

来源

2016-01-15 Heihachi

记得您滚动，导航栏，scrollspy元素在屏幕上改变其类。随着滚动可用的类是class="navbar navbar-default affix-top"后向下滚动了一下，班级变化至class="navbar navbar-default affix"由于该顶部元素从position: relative翻转至position: fixed，底部边距变得不稳定。

我宁可看到您将margin margin（45px？）添加到，并将类别navbar（从45px到0）的边距减小。那会在任何地方保护你。

糟糕。并谈到won。。同样的菜单在手机上需要一些工作，但我猜你还没有到那里。我分享你的痛苦。

来源

2016-01-15 06:22:34 zipzit

我已更新链接。我已经有了这个css规则： ''' ＃navbar-scrollspy.affix { position：fixed; top：0; 宽度：100％; z-index：10; } ''' – Heihachi

贴上的顶部导航栏覆盖锚的内容

回答

相关问题