Question

我试图将导航菜单保持在前面？如何让导航菜单位于我的所有内容之上而不隐藏它？

我的第二个问题是为什么导航菜单是＆＃34;闪烁＆＃34;我点击它的时候是什么时候？

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>

Answer 1

将高z-index值添加到导航栏div中，如下所示：

#nav  {
   z-index: 99999;
}

Answer 2

您可以使用z-index属性将导航保存在所有内容之上。为导航提供最高的z-index

根据您提供的代码，我假设您所说的闪烁是点击时的文字颜色变化。要改变这个，请使用此css

在链接处于活动状态（单击）时禁用颜色更改

a:active{
    color:blue;
}

禁用访问过的链接颜色更改

a:visited{
    color:blue;
}

Demo

Answer 3

默认为z-index:1;。设置任何元素z-index:2，如果你想将它放在任何其他元素的顶部。

示例：

nav{ 
    position:fixed;
    z-index:2;
}

导航栏隐藏在图片后面

3 个答案: