html - 滚动时如何隐藏横幅图像但将导航固定到顶部？

Question

当用户向下滚动时，我试图让导航栏保持固定在浏览器的顶部。但是，我在导航上方有一个图像，我希望它也向上滚动，因此滚动时只保留导航栏。

造成这种情况的主要原因是，当窗口尺寸减小时，标识最终会覆盖屏幕的大部分，内容变得很难看清。

这就是我想要完成的：http ://corp.ign.com/

这是我到目前为止所拥有的 JSfiddle：http: //jsfiddle.net/cZKeG/

HTML：

<div id="topWrapper">
    <a href="index.html">
        <header id="top_header">
            <h1>MacroPlay Games</h1>
        </header>
    </a>
    <nav id="topnav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="video.html">Trailers</a></li>
        </ul>
    </nav>   
</div> 

CSS：

#topWrapper {
    /*border:1px solid #00ffff;*/
    background-color:#0d0d0d;
    text-align:center;
    position:fixed;
    z-index:9999;
    width:100%;
    max-width: 850px;
    margin: 0 auto; left:0px; right:0px;
    float:clear;
    background-image: url('bg5.jpg');    
}

Answer 1

快速查看您提供的代码表明，当您只想修复 topnav 时，您正在修复整个 topWrapper

试试这个

#topnav {
/*border:1px solid #00ffff;*/
background-color:#0d0d0d;
text-align:center;
position:fixed;
z-index:9999;
width:100%;
max-width: 850px;
margin: 0 auto; left:0px; right:0px;
float:clear;
background-image: url('bg5.jpg');    

}