CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Fabian Wennink
Fabian Wennink

Reputation: 137

One page website change menu color each section

I'm currently building a one page website with a fixed navigation menu (with a blue background). This one page website has 4 sections, 2 with a blue background and 2 with a white background.

My idea to do with this menu is when i scroll (not mouse hover) over a blue section, the menu background turns white. and when i scroll over a white section, the background changes back to blue. An example can be found here.

(Not my site, but look at the changing color of the menu while scrolling)

My HTML code looks like this:

<div class="subMenu" >
    <div class="inner">
        <a href="#sTop" class="subNavBtn">Home</a>
        <a href="#s1" class="subNavBtn">Over mij</a> 
        <a href="#s2" class="subNavBtn">Kennis</a>
        <a href="#s3" class="subNavBtn">Projecten</a>
        <a href="#s4" class="subNavBtn">Contact</a>
    </div>
</div>

<div class="section s1">
    <div class="inner">
        <h1>Section 1</h1>
    </div>
</div>

<div class="section s2">
    <div class="inner">
        <h1>Section 2</h1>
    </div>
</div>
<div class="section s3">
    <div class="inner">
        <h1>Section 3</h1>
    </div>
</div>

<div class="section s4">
    <div class="inner">
        <h1>Section 4</h1>
    </div>
</div>

Is there a simple way to do this? Thanks in advance.

Upvotes: 1

Views: 3322

Answers (4)

matthias_h
matthias_h

Reputation: 11416

Just as quick example with jQuery a Fiddle 

 $(".s1,.s2").hover(function ()
{
  $(".subMenu").removeClass("white").addClass("blue");
});

$(".s3,.s4").hover(function ()
{
  $(".subMenu").removeClass("blue").addClass("white");
});
$(".s1,.s2,.s3,.s4").mouseleave(function ()
{
 $(".subMenu").removeClass("blue").removeClass("white");
});

Example CSS:

body {
  background-color:yellow;
}
.subMenu a {
  color:black;
}
.s3, .s4, .white {
   background-color:white;
}
.s1, .s2, .blue {
   background-color:blue;
}

For reference: http://api.jquery.com/addclass/, http://api.jquery.com/removeClass/, http://api.jquery.com/hover/, http://api.jquery.com/mouseleave/

Update for updated question: Previously question was to change background-color of menu in case scrolling over section which was misunderstood as hover. As question was clarified, approach would be e.g. to add jquery inview and to change the background-color when the white or blue section is in view following the instructions provided on given link (as I don't want to just copy them from there and final steps could be done by OP).
Just as example for using inview new Fiddle with inview. No need to style it, just expand the result window above the 1st section and scroll down; you'll notice that color will change according to the section which is in view. Added following for that: the mentioned inview.js and 

$('.s1,.s2').bind('inview', changeBlue);
$('.s3,.s4').bind('inview', changeWhite);

where the changeBlue() and changeWhite() functions are just the hover-events from above.

Upvotes: 0

Fabian Wennink
Fabian Wennink

Reputation: 137

I've found/created a temporary fix for my problem.

$(window).scroll(function(e) {
var s1 = $('.s1'),
    s2 = $('.s2'),
    s3 = $('.s3'),
    s4 = $('.s4'),
    menu = $('.menu'),
    diff = s1[0].offsetTop - window.pageYOffset;
    diff2 = s2[0].offsetTop - window.pageYOffset; 
    diff3 = s3[0].offsetTop - window.pageYOffset; 
    diff4 = s4[0].offsetTop - window.pageYOffset; 

    if(diff < 100) {
        $(".menu").addClass("white");
        $(".menu").removeClass("blue");
    }
    if(diff2 < 100) {
        $(".menu").addClass("blue");
        $(".menu").removeClass("white");
    }
    if(diff3 < 100) {
        $(".menu").addClass("white");
        $(".menu").removeClass("blue");
    }
    if(diff4 < 100) {
        $(".menu").addClass("blue");
        $(".menu").removeClass("white");
    }
    if(diff > 100) {
        $(".menu").removeClass("white");
        $(".menu").removeClass("blue");
    }

});

JSFIDDLE DEMO

Upvotes: 1

Arthur Brown
Arthur Brown

Reputation: 41

Take a look at the source of the example website you gave: view-source:http://www.franzsans.de/

section id="info" class="bg-white b-blue f-grey"

Upvotes: 0

mechalynx
mechalynx

Reputation: 1302

Not sure exactly what you want to do but, unless you want to change the background of another element (other than the one you're mousing over) an easy way is to use the :hover css selector.

like this:

.inner:hover{
    background-color: blue;
}

this will make changes to the class when you're hovering over.

If however, you want to make changes to a different element, then you need to attach an event handler through javscript:

(rough code, not tested)

var menuitem = document.getElementById('menu_to_turn_other_stuff_blue'); // can use getElementsByTagName here, but you'll have to walk the HTMLCollection returned

var otheritem = document.getElementById('other_stuff_to_turn_blue');

menuitem.onmouseover = function(){ otheritem.style.backgroundColor = "blue"; } // ideally, you want to use addEventListener, not directly modifying the attribute this way, but either will work - addEventListener is however the recommended way

you can use onmouseout or the proper event handler through addEventListener to change the color back if necessary. The CSS solution will work automatically for this.

Upvotes: 0

Related Questions