0

http://jsfiddle.net/GuXQZ/3/ <-(私のhtml+cssコード)

メイン メニューを下にスクロールしたときにメニューを下のヘッダーで停止させる方法。答えの前にタイ...

 body{
background: #83DF13;
font-family: Arial;
margin: auto;
}

#index{
background: #BCAEA4;
height: 35px;
padding: 0px 25px;
position: fixed;
top:0;
width: 100%;
}

/*Header Option*/
#header{
background: #fff;
width: auto;
margin: 45px 10px 10px 10px;
padding: 10px 10px;
height: 250px;
border-radius:10px;
-moz-border-radius:10px; /* Old Firefox */
}

#Link{
background: #fff;
width: auto;
height: 45px;
margin: 10px;
padding: 10px;
border-radius:0px 0px 10px 10px;
-moz-border-radius:0px 0px 10px 10px; /* Old Firefox */
}
4

1 に答える 1

0

そのためにはjsを使用する必要があります。

ただし、css のみから次のように実行できます。

http://jsfiddle.net/sachin4dotnet/GuXQZ/8/

css に追加:

.index0{
position: relative;
}

/*Header Option*/
#header{
    z-index: 2;
}

と html で：

<div class="index0" >
    <div id="index">
    header 
    </div>
    <div id="header">
    <marquee>slideshow lates Content</marquee>
    </div>
</div>
<div class="index0" style="width: auto; z-index: 10;background: #83DF13;">
    <div style="top: auto;">
    <div id="Link">
    main menu
    </div>
    </div>
<br> asdf </br>
<br> asdf </br>
<br> asdf </br>
<br> asdf </br>
<br> asdf </br>
<br> asdf </br>
<br> asdf </br>
<br> asdf </br>

</div>

しかし、良い効果を得るには、上記のカロルの例のようにクラスを変更するためにjsを使用する必要があります

于 2013-01-22T07:22:45.827 に答える