Simplemente posición: fijo, en lugar de fijar un encabezado de sitio o navegación en un estilo, los encabezados que aparecen en respuesta al desplazamiento se desvanecen y la pantalla es mucho mejor. El encabezado que reacciona al Scroll es un logotipo de sitio, menú, barra de navegación, etc. que puede proporcionar una experiencia de usuario más eficiente y agradable.
Por qué debe escribir encabezados que respondan al desplazamiento
Hay muchas personas que quieren mostrar siempre el encabezado y la barra de navegación para el usuario, la parte superior de la pantalla 100px menos de un montón de espacio, el logotipo y el menú del blog en su sitio, etc. Esto puede no importar mucho en las pantallas de escritorio. Sin embargo, en promedio, los usuarios móviles que no 600px el tamaño vertical siempre están oscurecidos por un mínimo de un sexto de la pantalla (teniendo en cuenta la navegación de su propio navegador, pero también alrededor de 1/3 ~ 1/4), el usuario no puede ocultar o controlar es bastante violento (?) Malestar.
Debido a eso, usted debe responder para su conveniencia o navegación (con pensamiento subjetivo) y mantener siempre el encabezado en la parte superior de la pantalla. Si desea un encabezado siempre implementado, el encabezado desaparece cuando el usuario se desplaza o toca el contenido si desea leer el contenido o escribir un menú, o utilizar la función de navegación para desplazarse hacia arriba o tocar la pantalla, entonces es necesario implementar un encabezado que aparece de nuevo (por supuesto, este enfoque puede ser incómodo para los usuarios que quieren ver el anterior de nuevo). Si no vas a implementar esto personalmente, te recomendamos que no uses sólo Position: fixed.
3 pasos para crear un encabezado que reaccione al desplazamiento
Hay varias formas de crear encabezados que responden al desplazamiento. Pero considere los estándares web que se expresan en cualquier entorno, recomiendo usar jQuery en lugar de usar métodos como CSS. Gkkmon (despierto) pero también trate de no utilizar JavaScript o jQuery (porque es más probable que se retrasen en términos de velocidad o recursos que el uso de funciones básicas). el encabezado que reacciona al scroll se debe a que el método JQuery ha mostrado grandes estándares web sin sacrificar significativamente el rendimiento.
Para usar jQuer
y 1. Importa el plugin JQuery.
2. Usted declara un script para ser usado por el plug-in de JQuery importado.
3. Necesitas tocar HTML, PHP y CSS.
Cargando plug-in JQuery
El plugin para crear cabeceras que respondan al desplazamiento es la versión jQuery-2.2.2. Para cargar este plugin
<script src="https://code.jquery.com/jquery-2.2.2.js"></script>
.
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
, puede utilizar este método porque la versión tiene un minuto detrás de él, que es el mismo código, pero le permite cargar más rápidamente mediante la eliminación de espacio y así sucesivamente.
Declarar secuencias de comandos en el plug-in de JQuery importado
Una vez que haya llamado al plug-in, debe declarar el script que desea utilizar.
<script></script>
$ (function {) {
var lastscrolltop = 0,
Delta = 15;
$ (ventana). Scroll (función (Event) {
var St = $ (this). ScrollTop ();
Si (Math. ABS (Lastscrolltop-ST)<= delta) return; delta)=""></= delta) return;>
if ((St > Lastscrolltop) & & (Lastscrolltop-0)) {
$ ("nombre del elemento"). CSS ("superior", "-ocultar altura");
Más
$ ("nombre del elemento"). CSS ("Top", "0px");
}
Lastscrolltop = St;
});
});
Coloque la clase o el identificador del elemento que desea controlar en el nombre del elemento. Suele poner Said. header. Debe configurar la altura o superior del elemento para ocultar, ya que volará la pantalla con la luz-PX cuando se oculta. Altura: Si desea controlar el nombre de la clase 50px. Header
<script></script>
$ (function {) {
var lastscrolltop = 0,
Delta = 15;
$ (ventana). Scroll (función (Event) {
var St = $ (this). ScrollTop ();
Si (Math. ABS (Lastscrolltop-ST)<= delta) return; delta)=""></= delta) return;>
if ((St > Lastscrolltop) & & (Lastscrolltop-0)) {
$ (". Header"). CSS ("superior", "-50px");
Más
$ (". Header"). CSS ("superior", "0px");
}
Lastscrolltop = St;
});
});
. El contenido de esta secuencia de comandos es, "si el desplazamiento táctil o del ratón detecta que la pantalla está descargada, significa cambiar la parte superior CSS de la cabecera. Header a-50px, y cambiar la parte superior CSS de la cabecera. a 0px cuando se desplaza el cursor."
CSS especifica el estilo de los elementos y la parte superior especifica la posición desde la parte superior de la pantalla del elemento especificado por la propiedad Position. En otras palabras, la parte superior de la pantalla 0px y-50px para ir y venir.
Cambiar CSS para que coincida con el script con jQuery
Por último, puede cambiar el CSS de acuerdo con la configuración de jQuery.
<style></style> Rúbrica Posición: fijo; /* Posición: Fix con fijo */ Z-index: 20; /* Establecer el z-index apropiado porque puede ser oscurecido por otros elementos */ Anchura: 100%; /* Screen 100% tamaño horizontal y */ Altura: 50px; /* Hacer un encabezado de 50px verticalmente */ Caja-apresto: frontera-caja; Transición: toda la facilidad de 0,2 s; /* Desaparece cuando aparece y da el efecto de que se ve liso, no hay necesidad de poner */ -WebKit-transición: todo 0,2 s facilidad; -Moz-Transition: todo 0,2 s Ease; -O-Transition: todo 0,2 s facilidad; }
Con los tres, podemos responder al scroll y crear un gran encabezado que parezca que desaparece.
El código terminado
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script></script>
$ (function {) {
var lastscrolltop = 0,
Delta = 15;
$ (ventana). Scroll (función (Event) {
var St = $ (this). ScrollTop ();
Si (Math. ABS (Lastscrolltop-ST)<= delta) return; delta)=""></= delta) return;>
if ((St > Lastscrolltop) & & (Lastscrolltop-0)) {
$ (". Header"). CSS ("superior", "-50px");
Más
$ (". Header"). CSS ("superior", "0px");
}
Lastscrolltop = St;
});
});
<style></style>
Rúbrica
Posición: fijo;
Z-index: 20;
Anchura: 100%;
Altura: 50px;
Caja-apresto: frontera-caja;
Transición: toda la facilidad de 0,2 s;
-WebKit-transición: todo 0,2 s facilidad;
-Moz-Transition: todo 0,2 s Ease;
-O-Transition: todo 0,2 s facilidad;
}
Si lo establece como se describe, puede tener fácilmente un encabezado de alta calidad que proporciona una gran experiencia de usuario. No es un gran problema, así que vamos a arreglarlo para su sitio o blog 24/7, siempre para un encabezado flotante. Sé que estoy familiarizado con el sitio, el encabezado es siempre fijo y pantalla-como ' Toolbar ', porque le da al usuario la peor experiencia de usuario.