Un lector me envió un GIF mostrando un efecto genial que vieron en Google en dispositivos móviles. (¿Presumiblemente, la página de inicio que ves cuando inicias Chrome en Android?) Hay una entrada de búsqueda en el medio de la página que se desplaza con la página, pero cuando está a punto de desplazarse fuera de la página, se adjunta al encabezado. Cubramos eso, porque, ya sabes …
OH: Soy un desarrollador web móvil, así que básicamente paso todo el día recibiendo solicitudes para que el contenido se quede en la parte superior después de desplazarme un poco.
– Daniel Wilson (@dancwilson) 16 de septiembre de 2014
Es un efecto genial, especialmente si se usa para mejorar la experiencia de usuario y no para colocar un anuncio intrusivo tonto. Aquí está el GIF en el que basé la idea. Un poco entrecortado, pero la idea está ahí:
Dos estados
Como la mayoría de los buenos trucos, no hay mucho que hacer. Todo lo que hacemos es pensar (y diseñar) los dos diferentes estados posibles:
- Barra de búsqueda en su posición desplazable
- Barra de búsqueda en su posición de encabezado fija
Alternamos entre ellos simplemente cambiando el nombre de una clase. No hay engaño en tener dos formularios de búsqueda que se revelen en diferentes escenarios. Eso es bueno, ya que no queremos hacer pitufos para mantenerlos sincronizados. Es mucho más fácil mover uno solo.
Estado uno
(Voy a usar SCSS aquí porque el anidamiento es bueno para administrar estados).
.top-header {
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 60px;
}
.search { /* Container just in case we want more than just the search input to come along */
position: absolute;
top: 155px;
left: 20px;
right: 20px;
input {
width: 265px;
transition: width 0.2s;
-webkit-appearance: none; /* Autoprefixer doesn't catch this */
}
}
.top {
height: 250px; /* Space in here for search */
padding-top: 40px;
position: relative;
}Estado dos
Suponiendo que hemos puesto una clase de “búsqueda de arreglos” en un elemento padre.
.top-header {
...
.fix-search & {
background: #eee;
}
}
.search { /* Container just in case we want more than just the search input to come along */
...
.fix-search & {
position: fixed;
top: 10px;
input {
width: 250px;
}
}
}Estados de conmutación
El truco aquí es aplicar esa clase en el momento adecuado. En nuestra pequeña demostración, podemos probar cuándo sería ese momento perfecto y codificarlo en un poco de JavaScript para ver si se desplaza. estilo jQuery:
var wrap = $("#wrap");
wrap.on("scroll", function(e) {
if (this.scrollTop > 147) {
wrap.addClass("fix-search");
} else {
wrap.removeClass("fix-search");
}
});Eso es todo lo que se necesita para cambiar entre los dos estados que hemos configurado. Si la página se ha desplazado hacia abajo 147 píxeles o más, se aplicará esa clase. Si no, no es así. Incluso si baja y vuelve a subir, la clase desaparecerá (porque esta pequeña función se llama en cada evento de desplazamiento).
Manifestación
Vea el cuadro de búsqueda de lápiz en el contenido se mueve a encabezado fijo por Chris Coyier (@chriscoyier) en CodePen.
Rebotando
En la gran tradición de mencionar la eliminación de rebotes de desplazamiento cada vez que una demostración vincula un evento a un evento de desplazamiento: debe considerar la eliminación de rebotes al vincular funciones a eventos de desplazamiento, porque si no lo hace, se llamará un trillón de veces y podría ser lento.
CSS
Este es el tipo de cosas que sería bueno hacer solo en CSS. Todavía no me vienen a la mente grandes soluciones, pero estoy continuamente sorprendido por las cosas locas para las que la gente usa CSS, así que si surge algo, actualizaré esto.
¿Quizás algún día podamos hacer consultas de medios de posición de desplazamiento?
Soporte de posición fija
Tenga en cuenta que esta demostración se basa en un posicionamiento fijo, que tiene un historial incompleto en dispositivos móviles. Si bien estoy tentado a decir que tiene un apoyo “bastante bueno” en estos días, usted mismo debe tomar la decisión. Un poco de lectura:
- ¿Puedo usar … en un posicionamiento fijo?
- Posicionamiento fijo en navegadores móviles por Brad Frost
- Problemas con la posición corregida y el desplazamiento en iOS por Remy Sharp
Este es solo un ejemplo (no particularmente reutilizable)
Hay muchos números mágicos en esta demostración. Cada vez que establezca alturas, debería haber algunas señales de advertencia en su cerebro. No significa nunca hacerlo, solo significa estar advertido. En esta demostración, si esa imagen centrada en el encabezado cambiara de altura, se vería extraño sin importar qué. Este no es el diseño más flexible y tolerante. Incluso si arregló el encabezado para que se vea justo después de un cambio, JavaScript tiene los números mágicos correspondientes para saber cuándo cambiar de estado.
Quizás alguna versión del uso de puntos de referencia (o su concepto) podría hacer un sistema más a prueba de balas.