html - 如何停止标题中的菜单(顶部)

Question

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 */
}

Answer 1

你必须为此使用 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>

但是为了获得好的效果，你必须像上面 Karol 的例子一样使用 js 来改变类