El encabezado cambia conforme se desplaza hacia abajo (jQuery)

Question

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

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

¿Cómo hago para crear algo como esto? ¿Hay algún tutorial en alguna parte? Si no es así, ¿puede alguien almas amables darme algunos consejos sobre dónde empezar? :)

Answer 1

No es demasiado difícil, es sólo un simple caso .scroll(). Parece que no puedo hacerlo en violín debido a la forma en que se colocan los paneles Verificar ¡EDITAR!. Pero básicamente lo que tienes es tener una div en la parte superior que es position: absolute lo que es siempre en la parte superior, a continuación, utilizar .scroll()

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

El método scrollTop() se utiliza para determinar la cantidad de la body se haya salido.

Y dependiendo de dónde desee cambiar su encabezado div, puede hacer que su declaración if haga muchas cosas. En el caso del ejemplo que nos ha facilitado, 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

Yay! ¡Pude hacer this fiddle para demostrar el ejemplo! :)

¡Buena suerte!

Answer 2

Control hacia fuera este Floating Divs

Lo que se busca es que es que se necesita para definir un Div Div como flotando y luego siempre permanece en la página cada vez que se desplaza. En Techcrunch que están teniendo sus cabeceras en la parte superior central y por lo que siempre se queda allí

Answer 3

He aquí una idea

• Enlazar a document.body.onscroll caso
• onscroll de verificación de la posición de desplazamiento. si no es en la parte superior, vuelva a colocar la imagen en el bar
• si como en la parte superior, mostrar la otra imagen

Answer 4

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

Como se puede ver en la imagen superior, tanto en la cabecera de grandes y pequeños son a la vez en la pantalla y esto no ocurriría sin ajustar el evento de desplazamiento de jQuery.

Answer 5

Pregunta anterior, pero recientemente me encontré con este problema y la solución aceptada aquí no funcionaría porque la altura de mis div no era la misma, 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') era el div superior que quería para activar el cambio de clase
• $ ('# blue_block_bottom') era el div que quería desencadenar la eliminación de clase
• $ ('# main_nav') fue mi cabecera fija

Por eso, cuando el fondo de mi cabecera llega a la parte superior de la 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" se elimina de ".home_nav".

Usted tendrá que repetir esta operación para cada uno de los botones con las de sus respectivos div

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

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

Answer 6

uso del código por debajo de su trabajo de mi lado

<script src='js/jquery-1.9.1.min.js' type="text/javascript"></script> 
<script> 
    $(document).on("mobileinit", function() { 

     $.mobile.fixedtoolbar.prototype.options.tapToggle = false; 
     $.mobile.fixedtoolbar.prototype.options.hideDuringFocus = ""; 

    }); 
</script> 
<script src="js/jquery.mobile-1.3.1.min.js"></script> 

Answer 7

$(window).on("scroll", function() { 
    if ($(this).scrollTop() > 100) { 
     $("#header").addClass("not-transparent"); 
    } 
    else { 
     $("#header").removeClass("not-transparent"); 
    } 
});