I want to change the navigation bar colour when the 'main' section of my site is scrolled to.
At the moment I have it changing colour but not at that specific section. It needs to change at that section due to the responsive design of the site.
Here is a basic jsfiddle example: http://jsfiddle.net/Forresty/8ottpo6x/1/
Here is the code:
HTML:
<nav class="test"></nav>
<div class="someText">
<p>......</p>
</div>
<main></main>
css:
nav {
position: fixed;
width: 100%;
top: 0;
height: 4.5em;
background: black;
}
.main{
width: 400px;
height: 2000px;
background: gray;
}
.black{
background: red;
}
Javascript:
$(window).scroll (function () {
var target = $(this).scrollTop();
if (target >= 500) {
$('nav').addClass('black');
}else {
$('nav').removeClass('black');
}
});
I tried the following javascript also:
var main = $('main');
$(window).scroll (function () {
var target = $(this).scrollTop();
if (target >= main) {
$('nav').addClass('black');
}else {
$('nav').removeClass('black');
}
});
This didn't work at all.
Any help would be highly appreciated.
Thanks.