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         


        

Answer 1

It seems you want same as what i implemented on my page.

Have look on menu section on http://s-yadav.github.com/contextMenu.html

As per your requirement try this.

HTML

    
Change the style of me to .mebutext2 on arriving to DIV1
    
Change the style of me to .mebutext2 on arriving to DIV2
    
Change the style of me to .mebutext2 on arriving to DIV3







DIV1





DIV2





DIV3

JS

$(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');
        }   
});
});

Update:

Generic method.

$(function () {

    var menu = $('#menu'),
        menuText = menu.find('.menuText'),
        contentDiv = $('.contentDiv');

    $(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');
        for (var i = 0; i < contentDiv.length; i++) {
            var elm = $(contentDiv[i]),
                id = contentDiv[i].id,
                top = elm.offset().top,
                nextTop = elm.next().offset().top || 1000000000;
            if (start > top && start < nextTop) {
                menuText.filter('[linkId="' + id + '"]').removeClass('menutext').addClass('menutext2');
                break;
            }
        }

    });

The second method is shorter and generic but less efficient than first one as every time loop will go inside scroll event. and scroll event are executed very frequently.

If the number of '.contentDiv' is less, i will prefer to follow first approach else follow second approach.