15 jQuery Plugins para fazer elementos pegajosos inteligentes

Agora é comum ver certos elementos em um site fixados a uma posição quando você rola para cima ou para baixo no site, por exemplo. o menu de navegação, o cabeçalho ou a barra lateral. Isso permite que o elemento esteja prontamente disponível, independentemente da posição do usuário.

Chamado de elemento pegajoso, isso pode ser conseguido usando CSS, no entanto, usando esse método, o efeito não é confiável em vários navegadores. É por isso que reunimos um punhado de bibliotecas JS e plugins jQuery que permitirão que você alcance esse design UX específico com pouca ou nenhuma complicação.

1. Waypoints

Waypoints é uma biblioteca para executar uma função baseada na posição do elemento na viewport. Ele vem com uma função de atalho que faz esse elemento “pegajoso”. Você pode personalizar a direção de rolagem - acima, baixa, e até mesmo certo e esquerda - quanto ao qual o elemento deve ficar dentro da viewport.

• Dependência: Nenhum / jQuery (opcional)
• Licença: Licença MIT

2. Kit Fixo

Com StickyKit, não só você pode fazer um elemento ficar dentro da viewport, mas você também pode fazê-los ficar dentro do elemento pai que você designar para vários elementos de uma só vez. O plug-in também vem com algumas configurações avançadas, incluindo eventos personalizados e gatilhos.

• Dependência: jQuery
• Licença: WTFPL

3. StickyJS

StickyJS é um plugin pegajoso jQuery fácil de usar que faz o que diz. O plugin funciona fora da caixa. No entanto, se você precisar de alguma personalização, ele vem com opções / configurações, métodos personalizados e eventos.

• Dependência: jQuery
• Licença: Licença MIT

4. HeadRoom

Um cabeçalho de site fixo ocupará um valioso espaço vertical que faz a diferença quando você visualiza o site no celular. Headroom é uma biblioteca JavaScript que tornará seu cabeçalho pegajoso inteligente; o cabeçalho ficará oculto quando os usuários percorrerem a página e aparecerem ao rolar para cima.

• Dependência: Nenhum / jQuery (opcional) / Angular (opcional)
• Licença: Licença MIT

5. MakefixedJS

Makefixed permite que os elementos sejam corrigidos dinamicamente enquanto os usuários rolam a página. Basta ligar para o makeFixed () função no elemento que você deseja fixar. Confira a demonstração para ver em ação.

• Dependência: jQuery
• Licença: GPL

6. MidnightJS

Meia noite permite que você cole vários cabeçalhos / elementos e alterne entre eles com base em sua posição dentro do documento (árvore DOM), confira a demonstração para ver o que quero dizer. Além disso, você pode alterar sua cor na hora simplesmente adicionando o data-meia-noite Atributo com o nome da cor especificado.

• Dependência: jQuery
• Licença: Licença MIT

7. ScrollMagic

ScrollMagic possui recursos avançados para adicionar interação, durante uma rolagem de página. Você pode fixar elementos de posições de rolagem específicas, adicionar animações com base na posição de rolagem ou até mesmo criar um incrível efeito de paralaxe. A demonstração fornece algumas informações sobre o que esse plug-in pode fazer.

• Dependência: jQuery / Velocity.js
• Licença: Licença Dupla (MIT e GPL)

8. onScreen

na tela é semelhante a Waypoints - permite executar funções quando o elemento está entrando, saindo ou atingindo determinadas posições na janela de exibição do navegador.

• Dependência: jQuery
• Licença: Licença MIT

9. jQuery Pin

Pin de jQuery é um pequeno plugin jQuery para “PIN” ou “soltar” elementos para uma posição, quando você rola a página. Minha parte mais favorita deste plugin é a opção de desativá-lo em certas larguras do visor.

• Dependência: jQuery
• Licença: Licença BSD

10. Float Fixo

Float pegajoso nos permite dar aos elementos uma posição fixa que é relativa ao seu pai. Você pode definir a opção de acordo com suas necessidades com os parâmetros fornecidos e alterando o valor. Pegue a demonstração aqui.

• Dependência: jQuery
• Licença: Indefinido

11. Pin Zebra

Pin Zebra é um plugin leve para fazer qualquer pino de elemento em seu contêiner. Com este plugin você pode adicionar “pegajoso” para elementos em seu projeto, como sua navegação, barras laterais, cabeçalhos e rodapés, ou outros elementos que você deseja manter visíveis quando os usuários rolarem para baixo. Confira a demonstração.

• Dependência: jQuery
• Licença: Licença GPL

12. HC-Sticky

Com HC-Sticky, você pode criar elementos fixos que se referem ao seu contêiner, a um determinado elemento ou ao próprio documento. Este plugin tem algumas opções que você pode ajustar à sua necessidade, como a distância da parte superior e inferior para começar a flutuar e outras opções.

• Dependência: jQuery
• Licença: Licença MIT

13. Mojo pegajoso

Mojo pegajoso é um plugin jQuery leve, rápido e flexível para criar ótimos elementos adesivos. É compatível com navegadores modernos e será degradado de maneira elegante no IE.

• Dependência: jQuery
• Licença: Licença MIT

14. Navbar Fixo

Se você quiser tornar a navegação de página única que fica quando se rola para baixo, esta biblioteca é para você.Navbar aderente colocará a navegação no topo da janela do navegador e destacará o link da âncora para conectar-se à seção correspondente na sua página. Você também pode adicionar o Animate.css para embelezar o efeito de navegação.

• Dependência: jQuery
• Licença: Licença MIT

15. StickyStack

StickyStack fará com que os elementos empilhem com outros quando os usuários rolarem o elemento e alcançarem o topo da viewport. Com esta biblioteca, sua longa página se transformará em cartões empilhados.

• Dependência: jQuery
• Licença: Indefinido