I have had a good look around and I am having a real hard time here with some jQuery, I can only find solutions to add a class to a div when scrolling but only by a certain numeric pixel number.
Here is a jsfiddle of my problem http://jsfiddle.net/sqz75b9g/
Also copied in the jquery. Now this works great under the purpose that the user has scrolled 500 pixels down. But I would like the addClass to happen when the user reaches the .content div, not just a pixel height.
Any advice would be greatly appreciated. Thank you very much.
$(function() {
var header = $('header');
var menu = $('#menu');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
header.addClass('dark');
menu.addClass('dark');
} else {
header.removeClass('dark');
menu.removeClass('dark');
}
});
})