is there any way I can change some elements (i.e. bullet navigation) depending on background color? Problem is that I have navigation made from dots that have two classes to choose. - light and dark. site is divided into sections and some sections have dark photos, and some sections have white background. Is there a way to make them change classes depending on color, or just position (to know on what section it is and attach class in that range)?
I tried to do it with "waypoints" jquery plugin and came up with that code:
var section = $('section'),
dots = $('#dots');
section.waypoint(function(direction) {
if (direction === 'down') {
var sectionId = $(this).attr('id');
$('a').removeClass('active');
var $href = '#' + $(this).attr('id'),
$anchor = $("a[href='" + $href + "']");
$anchor.addClass('active');
if( sectionId == 'home' || sectionId == 'product' || sectionId == 'contact' ) {
dots.removeClass('dots-dark').addClass('dots-light');
} else {
dots.removeClass('dots-light').addClass('dots-dark');
}
}
}, {
offset: '50%'
}).waypoint(function(direction) {
if (direction === 'up') {
var sectionId = $(this).attr('id');
$('a').removeClass('active');
var $href = '#' + $(this).attr('id'),
$anchor = $("a[href='" + $href + "']");
$anchor.addClass('active');
if( sectionId == 'home' || sectionId == 'product' || sectionId == 'contact' ) {
dots.removeClass('dots-dark').addClass('dots-light');
} else {
dots.removeClass('dots-light').addClass('dots-dark');
}
}
}, {
offset: '-50%'
});
The problem is that it was just triggering on upper part of the section and sliding down, so I made code above to make different offsets on scrolling up and down. It seemed to work only if the element is not higher than window, otherwise it just triggers somewhere else.
Here is the fiddle which will give you view on the problem: http://jsfiddle.net/D7tu5/1/
Look how do the dots behave on scrolling top with higher sections. As you can see, scrolling down works pretty well, but scrolling up from bottom does not.
Could you help me with that code, or just direct me to other solution? I'm empty of ideas already. Thank you in advance, cheers!
I have put together the following fiddle that achieves what i think you are after.
It works by setting way points at the 50% mark on both up and down directions. Which is not the most modular logic but it works in this case. Ideally we would detect when each dot crosses into the new area and change it's colour accordingly.
$("section").waypoint(function(direction) {
background = $(this).css('background-color');
if (direction === 'down') {
// Scrolling down
if (background == 'rgb(0, 0, 0)') {
$("#dots a").css('background-color', '#FFFFFF');
} else {
$("#dots a").css('background-color', '#000000');
}
}
},{
offset: '50%'
}).waypoint(function(direction) {
background = $(this).css('background-color');
if (direction === 'up') {
// Scrolling up
if (background == 'rgb(255, 255, 255)') {
$("#dots a").css('background-color', '#FFFFFF');
} else {
$("#dots a").css('background-color', '#000000');
}
}
},{
offset: '50%'
});
This could be made a lot cleaner with some refactoring but this should be enough to get you going in the right direction.