jquery - elegantthemes - plantilla divi wordpress gratis

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

Question

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 voy a crear algo como esto? ¿Hay algún tutorial en alguna parte y, de no ser así, puede alguien que, amables, almas, darme algunos consejos sobre por dónde empezar? :)

Answer 1

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.

Answer 2

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.

Como se 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.

Answer 3

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í.

Answer 4

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'') era 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é.

Answer 5

Usa el código de abajo su trabajo a 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 6

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!

Answer 7

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