El encabezado cambia a medida que se desplaza hacia abajo (jQuery)

TechCrunch recientemente rediseñó su sitio y tienen un encabezado dulce que se convierte en una versión más delgada de su marca a medida que se desplaza hacia abajo.

Puedes ver lo que quiero decir aquí: http://techcrunch.com/

¿Cómo haría para crear algo como esto? ¿Hay algún tutorial en algún lugar y, de no ser así, puede alguien que, amables, almas, darme algunos consejos sobre por dónde empezar? 🙂

No es demasiado difícil, es solo un simple evento .scroll() . Parece que no puedo hacerlo en forma violenta debido a la forma en que están colocados los paneles. ¡ Verificar EDITAR! . Pero básicamente, lo que tienes es tener un div en la parte superior que es position: absolute así que siempre está arriba, luego usa .scroll()

 $("body").scroll( function() { var top = $(this).scrollTop(); // if statement to do changes }); 

El método scrollTop() se utiliza para determinar cuánto ha desplazado el body .

Y dependiendo de dónde le gustaría cambiar el encabezado div, puede hacer que su sentencia if haga muchas cosas. En el caso del ejemplo que proporcionaste, sería algo así como

 if ( top > 147 ) // add the TechCrunch div inside the header else // hide the TechCrunch div so that space is transparent and you can see the banner 

EDITAR

¡Hurra! ¡Pude hacer este violín para demostrar el ejemplo! 🙂

¡Buena suerte!

Pregunta antigua, pero recientemente me encontré con este problema y la solución aceptada aquí no funcionaría porque la altura de mis divs no se resolvió, así que en resumen aquí está la solución que encontré.

JSfiddle: http://jsfiddle.net/Lighty_46/27f4k/12/

 $(document).ready(function () { var bluebutton = $('#blue_link').offset().top - parseFloat($('#blue_link').css('marginBottom').replace(/auto/, 0)); var bluebuttonbottom = $('#blue_block_bottom').offset().top - $('#main_nav').height() - parseFloat($('#blue_link').css('marginBottom').replace(/auto/, 0)); $(window).scroll(function (event) { // what the y position of the scroll is var y = $(this).scrollTop(); // whether that's below the top of the div if (y >= bluebutton) { // if so, ad the fixed class $('.home_nav').addClass('blue_selected'); } // whether you have passed the bottom of the div if (y >= bluebuttonbottom) { // if so remove the selected class $('.home_nav').removeClass('blue_selected'); } else { // otherwise remove it $('.home_nav').removeClass('blue_selected'); } }); }); 

Así que básicamente,

  • $ (‘# blue_link’) fue la división superior que quería para activar el cambio de clase
  • $ (‘# blue_block_bottom’) era el div que quería para activar la eliminación de clase
  • $ (‘# main_nav’) fue mi encabezado fijo

Entonces, cuando la parte inferior de mi encabezado alcanza la parte superior del div, la clase “blue_selected” se aplica a “.home_nav” ….. luego, si la parte inferior del div pasa la parte inferior del encabezado, la clase “blue_selected” es eliminado de “.home_nav”.

Deberá repetir esto para cada uno de sus botones con sus respectivos divs

Lo he probado en Chrome, Firefox e IE 10 a 8 (funciona en 8 pero el violín se rompe ligeramente).

Espero que esto ayude, probablemente no sea la mejor manera de hacerlo con toda honestidad y probablemente tenga algunos errores en alguna parte, pero fue el único en el que trabajé.

Echa un vistazo a este Divs flotante

Lo que está buscando es que necesita definir una Div como Div flotante y siempre permanece en la página cada vez que se desplaza. En Techcrunch tienen sus encabezados en la parte superior del Centro, por lo que siempre permanece allí.

Aquí hay una idea

  • Enlace al evento document.body.onscroll
  • onscroll de desplazamiento para la posición de desplazamiento. Si no está en la parte superior, reemplace la imagen en la barra.
  • Si está como arriba, muestra la otra imagen.
 $(window).on("scroll", function () { if ($(this).scrollTop() > 100) { $("#header").addClass("not-transparent"); } else { $("#header").removeClass("not-transparent"); } }); 

Aunque las respuestas anteriores parecen ser una solución perfecta, parece que TechCrunch utiliza el índice z y el posicionamiento fijo para hacer este efecto de desplazamiento.

Desmond en Imageshack

Como puede ver en la imagen de arriba, tanto el encabezado grande como el pequeño están en la pantalla y esto no sucedería sin ajustar el evento de desplazamiento de jQuery.

Usa el código de abajo su trabajo a mi lado