¿Agregar/eliminar clases con jquery basado en desplazamiento vertical?

Question

Así que, básicamente, me gustaría eliminar la clase de 'encabezado' después de que el usuario se desplaza un poco hacia abajo y agregar otra clase para cambiar su aspecto.

Tratando de averiguar la forma más sencilla de hacerlo, pero no puedo hacerlo funcionar.

$(window).scroll(function() {  
    var scroll = $(window).scrollTop();  
    if (scroll <= 500) { 
     $(".clearheader").removeClass("clearHeader").addClass("darkHeader"); 
    } 
} 

CSS

.clearHeader{ 
    height: 200px; 
    background-color: rgba(107,107,107,0.66); 
    position: fixed; 
    top:200; 
    width: 100%; 
}  

.darkHeader { height: 100px; } 

.wrapper { 
    height:2000px; 
} 

HTML

<header class="clearHeader"> </header> 
<div class="wrapper">  </div> 

Estoy seguro de que estoy haciendo algo mal muy elemental.

Answer 1

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 

    //>=, not <= 
    if (scroll >= 500) { 
     //clearHeader, not clearheader - caps H 
     $(".clearHeader").addClass("darkHeader"); 
    } 
}); //missing); 

Fiddle

Además, mediante la eliminación de la clase clearHeader, estás quitando el position:fixed; del elemento, así como la capacidad de volver a seleccionarlo a través del selector $(".clearHeader"). Sugiero no eliminar esa clase y agregar una nueva clase de CSS encima para diseñar.

Y si se quiere "restablecer" la adición clase cuando los usuarios se desplaza una copia de seguridad:

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 

    if (scroll >= 500) { 
     $(".clearHeader").addClass("darkHeader"); 
    } else { 
     $(".clearHeader").removeClass("darkHeader"); 
    } 
}); 

Fiddle

edición: Aquí es la versión almacenamiento en caché el selector de cabecera - un mejor rendimiento, ya que ganó 'Consulta el DOM cada vez que te desplazas y puedes quitar/agregar cualquier clase al elemento de encabezado sin perder la referencia:

$(function() { 
    //caches a jQuery object containing the header element 
    var header = $(".clearHeader"); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 

     if (scroll >= 500) { 
      header.removeClass('clearHeader').addClass("darkHeader"); 
     } else { 
      header.removeClass("darkHeader").addClass('clearHeader'); 
     } 
    }); 
}); 

Fiddle

Answer 2

¿Es este valor destinado? if (scroll <= 500) { ... Esto significa que está pasando de 0 a 500, y no 500 o más. En el post original se decía "después el usuario se desplaza hacia abajo un poco"

Answer 3

Añada un cierto efecto de transición a ella si le gusta:

http://jsbin.com/boreme/17/edit?html,css,js

.clearHeader { 
    height:50px; 
    background:lightblue; 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 

    -webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */ 
    transition: background 2s; 
} 

.clearHeader.darkHeader { 
background:#000; 
} 

Answer 4

Su mi código

jQuery(document).ready(function(e) { 
    var WindowHeight = jQuery(window).height(); 

    var load_element = 0; 

    //position of element 
    var scroll_position = jQuery('.product-bottom').offset().top; 

    var screen_height = jQuery(window).height(); 
    var activation_offset = 0; 
    var max_scroll_height = jQuery('body').height() + screen_height; 

    var scroll_activation_point = scroll_position - (screen_height * activation_offset); 

    jQuery(window).on('scroll', function(e) { 

     var y_scroll_pos = window.pageYOffset; 
     var element_in_view = y_scroll_pos > scroll_activation_point; 
     var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view; 

     if (element_in_view || has_reached_bottom_of_page) { 
      jQuery('.product-bottom').addClass("change"); 
     } else { 
      jQuery('.product-bottom').removeClass("change"); 
     } 

    }); 

}); 

Su trabajo fino

Answer 5

Por $ móvil Android (ventana) .scroll (función() y $ (document) .scroll (function() pueden o no funcionar. Entonces, en su lugar, use lo siguiente.

jQuery(document.body).scroll(function() { 
     var scroll = jQuery(document.body).scrollTop(); 

     if (scroll >= 300) { 
      //alert(); 
      header.addClass("sticky"); 
     } else { 
      header.removeClass('sticky'); 
     } 
    }); 

Este código funcionó para mí. Espero que te ayude.