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');

}

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

1 个答案: