Muitas vezes temos algum elemento da página seja ele um menu, banner ou um simples botão mas queremos fixá-lo na página, seja no topo, no rodapé ou na lateral.

Para isso podemos utilizar um plugin muito simples do jQuery chamado ScrollToFixed que permite selecionar um elemento e fixá-lo em uma posição.

Primeiramente baixe o plugin que está no github e inclua na sua página, não se esquecendo de inserir a biblioteca jQuery.

<script src="jquery.min.js"></script>
<script src="jquery-scrolltofixed-min.js"></script>

Após isso basta selecionar um elemento e chamar o método scrollToFixed para fixar o elemento

HTML

<nav id="menu">
	<ul>
		<li> <a href="#">Item 1</a></li>
		<li> <a href="#">Item 2</a></li>
		<li> <a href="#">Item 3</a></li>
		<li> <a href="#">Item 4</a></li>
	</ul>
</nav>

Javascript 

$(document).ready(function(){
	$('#menu').scrollToFixed();
});

Com isso já temos um menu que mesmo rolando o scroll do navegador para baixo vai ficar fixado no topo.

Adicionando um parâmetro ao método scrollToFixed podemos fazer aqueles clássicos links que ficam fixo no rodapé do navegador para clicar e subir o topo da página.

HTML 

<div id="botao">
    <a href="#">Topo</a>
</div>

Javascript 

$("#botao").scrollToFixed( {
     bottom: 0 //fixa na parte inferior
});

O scrollToFixed também disponíbiliza outras propriedades entre elas:

  • marginTop (value|function) – o numero de pixels entre o topo da janela do navegador e o elemento fixado.
  • limit (value|function) – a posição vertical na qual o elemento irá começar a ser “rolado para cima” da página, ou seja a partir de que ponto da página o elemento irá deixar de ser fixado.
  • bottom – (fix to bottom) numero de pixels entre a parte inferior da janela do navegador e o elemento fixado.
  • zIndex – o z-index do elemento fixado.

Veja um exemplo simples

Bom era isso, simples e rápido(ou não)