当滚动和重叠内容时，Bootstrap 3粘贴导航栏变得透明且不可点击 [英] Bootstrap 3 affix navbar becomes transparent and unclickable when scrolling and overlapping content

问题描述

我确定它非常简单，但我在Bootstrap甚至html / css中都很新。

我希望我的导航栏位于我的标题之后并且已修复在滚动时通过它到顶部。
我得到了这个工作，但是：当滚动时，导航栏变得透明且不可点击，并超出了我的其他内容。

我如何克服这个问题？

这是我的.html：

`

 < div id =navclass =navbar navbar-default> 
< div class =container> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse> 
< span class =sr-only>切换导航< / span>< span class =icon-bar>< / span>< span class =icon-bar> ;< / span>< span class =icon-bar>< / span> 
< / button> 
< a href =＃class =navbar-brand>您的公司< / a> 
< / div> 
< div class =collapse navbar-collapsestyle> 
< ul class =nav navbar-nav> 
< li class =active> 
< a href =＃>主页< / a> 
< / li> 
< li> 
< a href =＃about>关于< / a> 
< / li> 
< li> 
< a href =＃everyday>每天< / a> 
< / li> 
< li> 
< a href =＃contact>联系人< / a> 
< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
  

`

这是我的词缀.css ：

 ＃nav.affix {
 position：fixed; 
 top：0; 
 width：100％
} 
  

这里是我的词缀相关的js： p>

  $（function（）{
 $（'＃nav-wrapper'）。height（$（＃nav ）.height（））; 
 
 $（'＃nav'）。affix（{
 offset：{top：$（'＃nav'）。offset（）。top} 
}）; 
}）; 
  

谢谢！

解决方案

将 #nav 的 z-index 更改为：

  #nav {
 z-index：9999; 
} 
  

I'm sure it's very simple but I'm pretty new at Bootstrap and even html/css.

I want my navbar to be after my header and fixed to the top when scrolling past it. I got this working, BUT: the navbar becomes transparent and unclickable when scrolling and above my other content.

How do i overcome this?

Here's my .html:

`

<div id="nav" class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Your Company</a>
    </div>
    <div class="collapse navbar-collapse" style>
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#about">About</a>
        </li>
        <li>
          <a href="#everyday">Everyday</a>
        </li>
        <li>
          <a href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</div>

`

Here's my affix .css:

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

Here's my affix related js:

$(function() {
    $('#nav-wrapper').height($("#nav").height());

    $('#nav').affix({
        offset: { top: $('#nav').offset().top }
    });
});

Thank you!

解决方案

Change the z-index of #nav to :

#nav{
  z-index:9999;
}

这篇关于当滚动和重叠内容时，Bootstrap 3粘贴导航栏变得透明且不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！