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

Yes, you need jQuery, but I do not understand: You must apply menutext2 class when the scroll bars to see div1 or when you click div1?

set event (click or scroll and apply)

$('.menu').removeClass('menutext').addClass('menutext2');

Answer 2

You can use YAHOOs YUI framework to write a javascript along the lines of something like this:

var Event = YAHOO.util.Event;

Event.on(window, 'scroll', function() {

    if (document.getElementById("DIV1").scrollTop == 0) {
        document.getElementById("DIV1").className = "menutext2";
    }
}

Answer 3

Yup, done it with jsFiddle try this

Replace .css with .addClass and .removeClass. I use parent div of DIV1-3 because you was style a height on it parent.

$(window).scroll(function(){
var top = $(window).scrollTop() + $(window).height();
var offsetDiv1 = $("#DIV1").offset().top;
var offsetDiv2 = $("#DIV2").offset().top;
var offsetDiv3 = $("#DIV3").offset().top;
if(top >= offsetDiv1 && top <= $("#DIV1").parent("div").height() + offsetDiv1){
   // alert(top);
     $("#menu").css("background", "black");   
}else if(top >= offsetDiv2 && top <= $("#DIV2").parent("div").height() + offsetDiv2){
   // alert(top);
     $("#menu").css("background", "blue");  
}else if(top >= offsetDiv3 && top <= $("#DIV3").parent("div").height() + offsetDiv3){
    //alert(top);
     $("#menu").css("background", "yellow");  
}else{
      $("#menu").css("background", "gray");    
}

});

Answer 4

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

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

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

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.

Answer 5

Try something like this jsFiddle

$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 275) {
    $(".menutext").addClass(
        "menutext2");
} else {
    $(".menutext").removeClass(
        "menutext2");
}

});

I have this set to add .menutext2 after you've scrolled down 275px, approximate top of div2, it shouldn't be hard to figure it out from here.

Answer 6

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/