jquery - Change ul style when arriving to div(scrolling)

Question

I would like to change a ul style on scrolling and arrive to div using jQuery, explanation down.

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 code:

<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>

I want to change the div with the class "menutext" to class "menutext2" on scrolling and arriving to the top of the divs(first ul's class change from menutext1 to menutext2 on arriving to the div with the id DIV1, second ul's class change from menytext1 to menutext2 on arriving to the div with the id DIV2 AND the first ul's class return to menutext1 AS IT WAS and so on.

Answer 1

This should do what you're asking, using only 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');
        }
    });
});

Note that to make it work I had to apply the alldivs class on your div1, div2, div3, etc. and give the menu items classes corresponding to their IDs.

Demo in this jsFiddle: http://jsfiddle.net/ss7YF/

EDIT If you want only the closest one to be highlighted (for a fixed menu I'm guessing?) use this:

$(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/