html - 如何在标题中停止菜单（顶部）

Question

http://jsfiddle.net/GuXQZ/3/ <-(我的html+css代码)

向下滚动主菜单在底部标题处停止时如何使菜单在底部标题处停止。ty之前回答...

 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>

但是为了获得良好的效果，您必须像上面卡罗尔的示例一样使用 js 进行更改类