Criando menu fixo 100% com jQuery

Olá amigos! Veremos neste artigo como colocar um menu fixo 100%  com jQuery. Este recurso é bastante utilizado em projetos dinâmicos e principalmente em Landing Pages.

Vamos lá?

Primeiro, vamos definir nosso HTML.

<!DOCTYPE html>
<html>
    <head>
        <title>Exemplo Tutoriak</title>

        <meta charset="UTF-8">

        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
	</head>
    <body>
        <header class="content"></header>

        <nav id="menu" class="content"></nav>

        <section id="main"  class="content">
            <article>
                <h1>Título</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nunc pharetra augue tortor, et ornare dolor aliquam nec. Nulla facilisi.
                    Nullam aliquam sem enim, aliquam vestibulum justo pretium quis.
                    Proin quis feugiat odio, et pellentesque tortor.
                    Nullam tincidunt augue fermentum sem elementum tristique.
                    Maecenas sollicitudin tortor magna, sit amet posuere magna dignissim quis.
                    Duis nunc turpis, pharetra eget adipiscing eu, egestas at lectus.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nunc pharetra augue tortor, et ornare dolor aliquam nec. Nulla facilisi.
                    Nullam aliquam sem enim, aliquam vestibulum justo pretium quis.
                    Proin quis feugiat odio, et pellentesque tortor.
                    Nullam tincidunt augue fermentum sem elementum tristique.
                    Maecenas sollicitudin tortor magna, sit amet posuere magna dignissim quis.
                    Duis nunc turpis, pharetra eget adipiscing eu, egestas at lectus.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nunc pharetra augue tortor, et ornare dolor aliquam nec. Nulla facilisi.
                    Nullam aliquam sem enim, aliquam vestibulum justo pretium quis.
                    Proin quis feugiat odio, et pellentesque tortor.
                    Nullam tincidunt augue fermentum sem elementum tristique.
                    Maecenas sollicitudin tortor magna, sit amet posuere magna dignissim quis.
                    Duis nunc turpis, pharetra eget adipiscing eu, egestas at lectus.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nunc pharetra augue tortor, et ornare dolor aliquam nec. Nulla facilisi.
                    Nullam aliquam sem enim, aliquam vestibulum justo pretium quis.
                    Proin quis feugiat odio, et pellentesque tortor.
                    Nullam tincidunt augue fermentum sem elementum tristique.
                    Maecenas sollicitudin tortor magna, sit amet posuere magna dignissim quis.
                    Duis nunc turpis, pharetra eget adipiscing eu, egestas at lectus.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nunc pharetra augue tortor, et ornare dolor aliquam nec. Nulla facilisi.
                    Nullam aliquam sem enim, aliquam vestibulum justo pretium quis.
                    Proin quis feugiat odio, et pellentesque tortor.
                    Nullam tincidunt augue fermentum sem elementum tristique.
                    Maecenas sollicitudin tortor magna, sit amet posuere magna dignissim quis.
                    Duis nunc turpis, pharetra eget adipiscing eu, egestas at lectus.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nunc pharetra augue tortor, et ornare dolor aliquam nec. Nulla facilisi.
                    Nullam aliquam sem enim, aliquam vestibulum justo pretium quis.
                    Proin quis feugiat odio, et pellentesque tortor.
                    Nullam tincidunt augue fermentum sem elementum tristique.
                    Maecenas sollicitudin tortor magna, sit amet posuere magna dignissim quis.
                    Duis nunc turpis, pharetra eget adipiscing eu, egestas at lectus.</p>

            </article>
            <aside id="sidebar">
                <div class="ads"></div>
                <div class="ads"></div>

                <div class="ads headline"></div>
                <div class="ads headline"></div>

                <div class="ads"></div>
                <div class="ads"></div>
            </aside>
        </section>
        <div class="clearfix"></div>
        <footer class="content"></footer>

    </body>
</html>

O nosso alvo será o nav#menu. Esse que teremos que saber a posição para transformá-lo em fixo e 100% no topo da tela

  <nav id="menu" class="content"></nav>

Veja que em nosso html já está incluído:

  • Arquivo normalize.css, apenas para normalizar nosso HTML.
  • Temos também o arquivo style.css, que está estilização da nossa página
  • Também temos o jQuery
  • Temos o main.js, que é onde estará o nosso efeito

Vamos criar um pasta css e dentro dela vamos criar o arquivo style.css

.content{
    width:960px;
    margin:0 auto;
}

.contentFullFixed{
    position:fixed;
    width:100%;
    top:0;
    left:0;
}

header{
    height:200px;
    background:#f5f5f5;
}
#menu{
    background:#f00;
    height:30px;
}
article{
    width:70%;
    float:left;

}
#sidebar{
    width:29%;
    float:right;
    margin-top:30px;
}

footer{
    height:100px;
    background: #333;
}

#main:before{
    content: "";
    height:1px;
    display:block;
     clear:both;
}

.clearfix{
    clear:both;
}

.ads{
    width:100%;
    margin:0;
    height:100px;
    background:#00232c;
    margin-bottom: 10px;
}

.headline{
    background:#0066CC;
}

.featured{
    background:#006505;
}

No CSS, temos a classe que irá colocar o menu com 100% e fixo no topo, onde declaramos o position:fixed, e o width:100%.

.contentFullFixed{
    position:fixed;
    width:100%;
    top:0;
    left:0;
}

Agora vamos para parte do Javascript. A lógica será:

Verificar a posição do nav#menu e a posição atual do scroll, se essa posição do scroll ultrapassar a posição do nav#menu, ele vai adicionar em nav#menu à classe .contentFullFixed e se não for, ele remove. Dessa forma, quando a pessoa voltar para topo, o menu volta para sua posição original.

Criei uma pasta chamada js e dentro criei um arquivo chamado main.js

<br />
jQuery(function($){<br />
  /**<br />
   * Define a variável elementoMenu.<br />
   * Atribui o elemento #menu<br />
   */<br />
   var elementoMenu = $(&quot;#menu&quot;);<br />
   /**<br />
   * Define a variável posicaoAlvoTopo,<br />
   * Atribuir a posição desse elemento na página<br />
   */<br />
   var posicaoMenu = elementoMenu.offset().top;</p>
<p>   /**<br />
    * Vincula o evento scroll a window,<br />
    * e definimos uma função anômima<br />
    * ao evento scroll<br />
    *<br />
    */<br />
  $(window).scroll(function(){<br />
      /**<br />
       * Define uma variável posicaoAtualScroll,<br />
       * e atribui a posição atual do scroll<br />
       */<br />
        var posicaoAtualScroll = $(window).scrollTop();</p>
<p>        /**<br />
         * Verifica se posição do scroll ultrapassou o Menu<br />
         * Se for maior, ele adicionar a classe contentFullFixed<br />
         * Senão, será removida a classe<br />
         */<br />
       if(posicaoAtualScroll &gt; posicaoMenu){<br />
           elementoMenu.addClass('contentFullFixed');<br />
         } else{<br />
           elementoMenu.removeClass('contentFullFixed');<br />
       }</p>
<p>   });<br />
});</p>
<p>

Veja como ficou o efeito final.

Espero que tenham gostado e até a próxima.

Forte abraço!

2 thoughts on “Criando menu fixo 100% com jQuery

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *