1

ユーザーが下にスクロールしたときに、ナビゲーションバーをブラウザーの上部に固定したままにしようとしています。ただし、ナビゲーションの上に画像があり、スクロールしても上にスクロールしたいので、スクロールしてもナビゲーションバーだけが残ります。

この主な理由は、ウィンドウ サイズを縮小すると、ロゴが画面の大部分を覆い、コンテンツが非常に見づらくなるためです。

これは私が達成しようとしていることです: 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');    
}
4

1 に答える 1

0

あなたが提供するコードをざっと見てみると、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');

}

于 2013-02-16T00:09:30.303 に答える