Bootstrap 3粘贴导航条在滚动和重叠内容时变得透明且不可点击
Bootstrap 3 affix navbar becomes transparent and unclickable when scrolling and overlapping content
我相信它很简单,但我对Bootstrap甚至html/css都很陌生。
我希望我的导航栏在我的标题后面,滚动经过它时固定在顶部。我做到了,但是:当滚动和在我的其他内容上方时,导航栏变得透明且不可点击。
我该如何克服这一点?
这是我的.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>
`
这是我的词缀。css:
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
这是我的词缀相关js:
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
谢谢!
将#nav
的z-index
更改为:
#nav{
z-index:9999;
}
相关文章:
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- angular 1.5应用程序中的导航栏
- 无法从jquery Mobile导航栏重定向到另一个页面
- Bootstrap 3粘贴导航条在滚动和重叠内容时变得透明且不可点击
- 如何使导航栏透明,然后使用bootstrap 3更改颜色.(粘贴)
- 由视频覆盖的引导导航栏 - 如何用不透明背景覆盖它
- 滚动上的导航栏透明
- 导航图像在页面加载时保持透明
- 当到达定位点时,使导航栏透明
- 向下滚动时隐藏透明固定导航栏下的内容
- 我怎么能让一个粘性导航条在英雄的底部看起来透明,然后再固定在顶部
- CSS垂直导航菜单,带有水平子菜单和半透明带
- 仅当导航栏位于页面顶部时使其透明,然后在滚动时使其背景为纯背景
- 我如何添加导航箭头上的“JQuery照片滑块与半透明标题”
- 透明导航条,滚动时可见
- 100%导航条与透明的脉冲为末端和重复模式
- 在滚动或到达页面上的某个点时,导航栏从透明变为白色
- 如何使固定导航条透明基于页面滚动
- 如何使滚动到文档顶部时透明导航栏
- 如何使引导导航栏背景有一个透明的淡出到网页