导航栏隐藏在图片后面

Question

我试图将导航菜单始终放在前面？如何让导航菜单位于我所有内容的顶部而不隐藏在它后面？

我的第二个问题是为什么当我点击导航菜单时，它有时会“闪烁”？

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

像这样向导航栏 div 添加一个高 z-index 值：

#nav  {
   z-index: 99999;
}