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

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

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

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/

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

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";
    }
}