Question

我有简单的菜单，其中包含uls，我想在页面到达div（内容）时更改ul的样式（使用css），我的意思是滚动并到达该div。例如，我有这段代码：

css文件

#menu {
    background-color: #ccc;
    width:100%;
}

.menutext {
    padding:25 40 30 !important;
    display:inline-block;
}

.menutext2 {
    padding:25 40 0 !important;
    display:inline-block;
    color:red;
}

.alldivs {
    width:300px;
    height:200px;
    background-color:a9a9a9;
}

HTML

<div id="menu">
    <div class="menutext">Change the style of me to .mebutext2 on arriving to DIV1</div>
    <div class="menutext">Change the style of me to .mebutext2 on arriving to DIV2</div>
    <div class="menutext">Change the style of me to .mebutext2 on arriving to DIV3</div>
</div>

<br><br><br>

<div class="alldivs"><div id="DIV1">DIV1</div></div>
<br><br><br><br>
<div class="alldivs"><div id="DIV2">DIV2</div></div>
<br><br><br><br>
<div class="alldivs"><div id="DIV3">DIV3</div></div>
<br><br><br><br>

这是mycode http://jsfiddle.net/vu7Hh/

不久：当我滚动并到达DIV2的顶部时，例如菜单样式中的第二个ul改为.menustyle2（换句话说它变成红色）。所以我认为我应该在这里使用jQuery。

菜单ul样式更改到达div

0 个答案: