Headroom
O plugin Headroom permite reagir ao rolamento da página. Por exemplo, ao rolar para baixo, a barra de aplicativo desaparece; ao rolar para cima, ela reaparece.
As funcionalidades de ocultar automaticamente a barra de aplicativo e ocultar automaticamente a barra de navegação inferior mencionadas anteriormente são implementadas usando este plugin.
Como usar
- Chamada via atributos personalizados (se o componente for gerado dinamicamente, é necessário chamar
mdui.mutation()para inicialização) - Chamar via JavaScript
Como usar
Chamar via atributos personalizados
Neste modo, não é necessário escrever código JavaScript. Basta adicionar o atributo mdui-headroom="options" ao elemento para ativar o plugin.
Se o componente for gerado dinamicamente, é necessário chamar mdui.mutation() para inicialização.
<div mdui-headroom style="position: fixed; top: 0; left: 0; right: 0;"></div>Chamar via JavaScript
Instanciar o plugin:
// selector é um seletor CSS ou um elemento DOM
// options são os parâmetros do plugin, veja a lista de parâmetros abaixo
var inst = new mdui.Headroom(selector, options);Parâmetro
| Nome do parâmetro | Tipo | Valor padrão | Descrição |
|---|---|---|---|
tolerance | int | Object | 5 | A distância de rolagem após a qual o elemento deve ser ocultado. Se o valor for um número, indica que a distância de ativação para rolagem para cima e para baixo é a mesma. Também pode ser um objeto especificando as distâncias de ativação para cima e para baixo separadamente. Ex: |
offset | int | 0 | A distância do topo da página na qual o elemento começa a ser ocultado ao rolar. |
initialClass | string | mdui-headroom | Classe CSS adicionada ao elemento após a inicialização do plugin. |
pinnedClass | string | mdui-headroom-pinned-top | Classe CSS adicionada após fixar o elemento. |
unpinnedClass | string | mdui-headroom-unpinned-top | Classe CSS adicionada após desafixar o elemento. |