Change Ul Style When Arriving To Div(scrolling)

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%; } .men

Solution 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 getvar 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/

Solution 2:

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

varEvent = YAHOO.util.Event;

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

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

Solution 3:

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');

Solution 4:

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.

Solution 5:

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");   
}elseif(top >= offsetDiv2 && top <= $("#DIV2").parent("div").height() + offsetDiv2){
   // alert(top);
     $("#menu").css("background", "blue");  
}elseif(top >= offsetDiv3 && top <= $("#DIV3").parent("div").height() + offsetDiv3){
    //alert(top);
     $("#menu").css("background", "yellow");  
}else{
      $("#menu").css("background", "gray");    
}

});