Headroom
El complemento Headroom puede responder al desplazamiento de la página; por ejemplo, cuando la página se desplaza hacia abajo, la barra de aplicaciones desaparece, y cuando se desplaza hacia arriba, vuelve a aparecer.
La función de ocultar automáticamente la barra de aplicaciones y la de ocultar automáticamente la barra de navegación inferior que se presentó anteriormente se implementa con este complemento.
Modo de uso
- Se llama mediante atributos personalizados (si el componente se genera dinámicamente, debes llamar a
mdui.mutation()para inicializarlo). - Llamada vía JavaScript
Modo de uso
Llamada vía atributos
Con este método no necesitas escribir JavaScript. Solo tienes que añadir el atributo mdui-headroom="options" al elemento para activar el complemento.
Si el componente se genera dinámicamente, debes llamar a mdui.mutation() para inicializarlo.
<div mdui-headroom style="position: fixed; top: 0; left: 0; right: 0;"></div>Llamada vía JavaScript
Instanciar el complemento:
// selector es un selector CSS o un elemento DOM
// options son los parámetros del complemento; consulta la lista de parámetros que aparece a continuación
var inst = new mdui.Headroom(selector, options);Parámetro
| Nombre | Tipo | Valor por defecto | Descripción |
|---|---|---|---|
tolerance | int | Object | 5 | Distancia de desplazamiento tras la cual se desencadena el ocultamiento del elemento. Si el valor es un número, la distancia de activación es la misma tanto para el desplazamiento hacia arriba como hacia abajo. También puede ser un objeto que especifique la distancia de activación para el desplazamiento hacia arriba y hacia abajo por separado. Por ejemplo, |
offset | int | 0 | Distancia desde la parte superior de la página a partir de la cual comienza a ocultarse el elemento al desplazarse. |
initialClass | string | mdui-headroom | Clase CSS añadida al elemento tras inicializar el complemento. |
pinnedClass | string | mdui-headroom-pinned-top | Clase CSS añadida cuando el elemento queda fijado. |
unpinnedClass | string | mdui-headroom-unpinned-top | Clase CSS añadida tras dejar de fijar el elemento. |