jquery - 到达 div 时更改 ul 样式(滚动)

Question

我想在滚动时更改 ul 样式并使用 jQuery 到达 div，解释如下。

CSS:

#menu {
    background-color:#ccc;
    position:fixed;
    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>

我想在滚动并到达 div 顶部时将类“menutext”的 div 更改为类“menutext2”(第一个 ul 的类从 menutext1 更改为 menutext2 到达具有 id DIV1 的 div，第二个ul 的类在到达 ID 为 DIV2 的 div 时从 menytext1 更改为 menutext2，并且第一个 ul 的类按原样返回 menutext1，依此类推。

Answer 1

这应该可以满足您的要求，仅使用 jQuery:

$(document).scroll(function(e) {
    var detectrange = 50; //how close to the top of the screen does it need to get
    var scrolltop = $(window).scrollTop() + detectrange;
    $('.alldivs').each(function(i, el){
        if (scrolltop > $(el).offset().top) {
            $('.'+el.id).removeClass('menutext').addClass('menutext2');
        }
    });
});

请注意，为了使其正常工作，我必须在您的 div1、div2、div3 上应用 alldivs 类> 等，并赋予其 ID 对应的菜单项类。

这个 jsFiddle 中的演示:http://jsfiddle.net/ss7YF/

编辑 如果您只想突出显示最接近的菜单(我猜是为了固定菜单？)，请使用此命令:

$(document).scroll(function(e) {
    var scrolltop = $(window).scrollTop();
    var mindist = 1000;
    var closest = '';
    $('.alldivs').each(function(i, el){
        var thisdist = Math.abs(scrolltop - $(el).offset().top);
        if (thisdist < mindist) {
            closest = el.id;
            mindist = thisdist;
        }
    });
    if (closest != '') {
        $('.menutext2').toggleClass('menutext menutext2');
        $('.'+closest).toggleClass('menutext menutext2');
    }
});

jsFiddle:http://jsfiddle.net/ss7YF/1/