Agregar clase cuando el elemento llegue a la parte superior de la ventana gráfica

Intento agregar una clase al encabezado cuando un elemento alcanza la parte superior de la ventana gráfica, pero parece que no puedo descubrir por qué no funciona. No tengo errores y he comprobado que jquery está obteniendo los desplazamientos y así es. Cualquier ayuda sería genial. También me gustaría saber cómo extender este código a cualquier número de secciones en lugar de indicar solo 6.

JS FIDDLE

$(document).ready(function () { var project1 = $('section:nth-child(1)').offset(); var project2 = $('section:nth-child(2)').offset(); var project3 = $('section:nth-child(3)').offset(); var project4 = $('section:nth-child(4)').offset(); var project5 = $('section:nth-child(5)').offset(); var project6 = $('section:nth-child(6)').offset(); var $window = $(window); $window.scroll(function () { if ($window.scrollTop() >= project1) { $("header").removeClass().addClass("project1"); } if ($window.scrollTop() >= project2) { $("header").removeClass().addClass("project2"); } if ($window.scrollTop() >= project3) { $("header").removeClass().addClass("project3"); } if ($window.scrollTop() >= project4) { $("header").removeClass().addClass("project4"); } if ($window.scrollTop() >= project5) { $("header").removeClass().addClass("project5"); } if ($window.scrollTop() >= project6) { $("header").removeClass().addClass("project6"); } }); }); 

El método .offset() devuelve un objeto que contiene las propiedades top e left :

 {top: 1808, left: 8} 

Por lo tanto, debe acceder a la propiedad top en sus declaraciones condicionales.

Cambio

 if ($window.scrollTop() >= project1) { ... } 

a:

 if ($window.scrollTop() >= project1.top) { ... } 

Ejemplo actualizado


Como nota al margen, $('section:nth-child(1)').offset() no estará definido porque el elemento de sección no es el primer elemento (el

es). Uso :nth-of-type lugar de :nth-child . Como está utilizando jQuery, eq() también funcionaría.

 $(document).ready(function() { var project1 = $('section:nth-of-type(1)').offset(); var project2 = $('section:nth-of-type(2)').offset(); var project3 = $('section:nth-of-type(3)').offset(); var project4 = $('section:nth-of-type(4)').offset(); var project5 = $('section:nth-of-type(5)').offset(); var project6 = $('section:nth-of-type(6)').offset(); var $window = $(window); $window.scroll(function() { if ( $window.scrollTop() >= project1.top) { $("header").removeClass().addClass("project1"); } if ( $window.scrollTop() >= project2.top ) { $("header").removeClass().addClass("project2"); } if ( $window.scrollTop() >= project3.top ) { $("header").removeClass().addClass("project3"); } if ( $window.scrollTop() >= project4.top ) { $("header").removeClass().addClass("project4"); } if ( $window.scrollTop() >= project5.top ) { $("header").removeClass().addClass("project5"); } if ( $window.scrollTop() >= project6.top ) { $("header").removeClass().addClass("project6"); } }); }); 
 header { position: fixed; top: 0; left: 0; right: 0; height: 100px; background: #000; } header.project1 { background: red; } header.project2 { background: orange; } header.project3 { background: blue; } header.project4 { background: green; } header.project5 { background: red; } header.project6 { background: blue; } section { height: 900px; } 
  
Section 1
Section 2
Section 3
Section 4
Section 5
Section 6