导航栏隐藏在图片后面
Navigation bar being hidden behind pics
我想把导航菜单一直放在前面吗?如何使导航菜单位于我所有内容的顶部而不隐藏在其后面?
我的第二个问题是为什么当我点击导航菜单时,它有时会"闪烁"?
js
$(function() {
// Stick the #nav to the top of the window
var nav = $('#nav');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
left: nav.offset().left,
width: nav.width()
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});
$(document).ready(function() {
//set opacity to 0.4 for all the images
//opacity = 1 - completely opaque
//opacity = 0 - invisible
$('.photos img').css('opacity', 0.4);
// when hover over the selected image change the opacity to 1
$('.photos td').hover(
function(){
$(this).find('img').stop().fadeTo('slow', 1);
},
function(){
$(this).find('img').stop().fadeTo('slow', 0.4);
});
});
css
.menu{
text-decoration: none;
display: inline-block;
margin: 4px;
font-family: 'Amatic SC';
font-size: 30px;
html
<div id="nav" align="left">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<ul id="mymenu">
<li class="menu"><a href="#about">About</a></li>
<li class="menu"><a href="#portfolio">Portfolio</a></li>
<li class="menu"><a href="#Dream">Dream</a></li>
<li class="menu"><a href="#contact">Contact</a></li>
<li class="menu"><a href="#Love">Love</a></li>
</ul>
问题内容的html
<table class="photos" style="border-spacing: 0; border-width: 0; padding: 0 0; border-width: 0; width: 100%;" >
<tr>
<td><img src="Dad.jpg" alt="Poppy" /></td>
<td><img src="gili.jpg" alt="Poppy" /></td>
<td><img src="me2.jpg" alt="Poppy" /></td>
</tr>
<tr style="border-collapse: collapse;">
<div> <td><img src="Hotrack.jpg" alt="Poppy" /></td>
<td><img src="shir.jpg" alt="Poppy" /></td></div>
<td><img src="" alt="Poppy" /></td>
<td><img src="" alt="Poppy" /></td>
<td><img src="" alt="Poppy" /></td>
<td><img src="" alt="Poppy" /></td>
</tr>
</table>
向导航栏div添加一个高z索引值,如下所示:
#nav {
z-index: 99999;
}
您可以使用z-index属性来保持nav在所有内容之上。为导航提供最高的z索引
根据你提供的代码,我假设你所说的闪烁是点击时文本颜色的变化。要更改此设置,请使用此css
链接处于活动状态时禁用颜色更改(单击)
a:active{
color:blue;
}
禁用访问链接颜色更改
a:visited{
color:blue;
}
演示
作为默认z-index:1;
。如果要将任何元素z-index:2
设置为任何其他元素的顶部,请将其设置为。
示例:
nav{
position:fixed;
z-index:2;
}
相关文章:
- 显示放大镜弹出窗口时隐藏导航内容
- 导航栏隐藏在图片后面
- 在离子滚动时隐藏离子导航栏
- jquery导航显示和隐藏多个页面
- 使用 JavaScript 显示和隐藏导航栏进行滚动和悬停功能
- 如果导航选项卡内容为空,则无法隐藏导航选项卡
- 如何让我的移动菜单按钮显示和隐藏导航栏,以及在负空间中单击时隐藏
- AngularJS - 如果用户登录,则显示/隐藏导航项
- 更改屏幕时隐藏导航栏上的元素's宽度
- 在IE中工作的自动隐藏导航栏
- 如果路由是登录的,如何在应用程序模板中隐藏导航栏
- 单击后隐藏导航菜单
- 使用Headroom JS来隐藏导航条,并在需要时显示
- 如何隐藏导航条时,当覆盖出现
- 如何隐藏导航的左和右基于第一个和最后一个
- 自动显示和隐藏导航栏
- AngularJs:基于路由隐藏导航栏元素
- 只有在移动设备中,才能在向下滚动时隐藏导航并在向上滚动时显示
- 自动显示/隐藏导航改变颜色时,滚动
- 高级jquery循环隐藏导航