javascript - 到达 div 时更改菜单 ul 样式

Question

我正在搜索的代码非常简单，只是我有 div 和菜单，我希望当我通过滚动到达第一个 div 时，菜单中的第一个 ul 会自动更改其样式，然后当我滚动到第二个 div 时第二个 url 样式更改为另一种样式，就像那样......我得到了我的问题的答案，我有代码，但我不喜欢它，因为它非常高，它包含我得到的每个 div 的代码。据我所知，我可以找到一个在 jQuery 中为整个 div 完成工作的短代码。我想要的正是这段代码（我无法让它通过http://jsfiddle.net/工作，如果有人知道如何在那里加载 jquery，请加载它并给我 url）

<html>
<style>
#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;
}
</style>
<div id="menu">
    <div class="menutext" linkId="DIV1">Change the style of me to .mebutext2 on arriving to DIV1</div>
    <div class="menutext"  linkId="DIV2">Change the style of me to .mebutext2 on arriving to DIV2</div>
    <div class="menutext"  linkId="DIV3">Change the style of me to .mebutext2 on arriving to DIV3</div>
</div>

<br><br><br><br><br><br><br>

<div class="alldivs"><div class="contentDiv" id="DIV1">DIV1</div></div>
<br><br><br><br><br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV2">DIV2</div></div>
<br><br><br><br><br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV3">DIV3</div></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){

    var menu=$('#menu'),
        menuText=menu.find('.menuText'),
        DIV1=$('#DIV1'),
        DIV2=$('#DIV2'),
        DIV3=$('#DIV3'),
        DIV1Top=DIV1.offset().top,
        DIV2Top=DIV2.offset().top,
        DIV3Top=DIV3.offset().top;

$(window).scroll(function(e) {
    var win=$(this),
        scrollTop=$(this).scrollTop();


    //to make nav menu selected according to scroll
    var start=scrollTop;
    menuText.filter('.menutext2').removeClass('menutext2').addClass('menutext');
    if(start>DIV3Top){
        menuText.filter('[linkId="DIV3"]').removeClass('menutext').addClass('menutext2');
        }
    else if (start>DIV2Top){
        menuText.filter('[linkId="DIV2"]').removeClass('menutext').addClass('menutext2');
        }
    else if(start>DIV1Top){
        menuText.filter('[linkId="DIV1"]').removeClass('menutext').addClass('menutext2');
        }   
});
});
</script>

score 1 · Accepted Answer

像这样的东西：

$(function(){

  var offsets = [],
      menuText = $('#menu .menuText');

  $("div.contentDiv").each( function(i, div) {
      offsets.push({ id: div.id, offset: $(div).offset().top });
  });

  $(window).scroll(function(e) {
    var start = $(this).scrollTop();
    for ( var div = 0; div < offsets.length; div++ ) {
      if ( start > offsets[div].offset ) { 
        menuText.removeClass('menutext2').addClass('menutext');  
        menuText.filter('[linkId="'+offsets[div].id+'"]').addClass('menutext2').removeClass('menutext');
      }
    }
    if ( start === 0 ) { menuText.removeClass('menutext2').addClass('menutext'); }
  });
});

http://jsbin.com/ijiwom/2/edit

编辑：

http://jsbin.com/ijiwom/3/edit

编辑 2：

http://jsbin.com/ijiwom/4/edit

编辑 3：

http://jsbin.com/ijiwom/5/edit