Menu Horizontal Que Segue O Scroll Down – jQuery

Este tutorial vai ajudar você a criar uma menu horizontal que permanece na parte visível do monitor, mesmo quando o usuário faz scroll down, em jQuery e CSS. Quando o usuário faz scroll down, há um efeito de desvanecimento do menu, que desaparece com o hover do mouse. É um script simples, mas fantástico, que pode adicionar um elemento atrativo ao seu site. Espero que você goste do tutorial. Obrigado!

Demo: Menu Horizontal Que Segue O Scroll Down Com jQuery

Código JQuery

$(function(){

  

var navigations = $('#navigations'),

  pos = navigations.offset();

  

  $(window).scroll(function(){

                

    if($(this).scrollTop() > pos.top+navigations.height() && navigations.hasClass('default')){

      

      navigations.fadeOut('fast', function(){

                      

        $(this).removeClass('default').addClass('stabled').fadeIn('fast');

      });

      

    } else if($(this).scrollTop() <= pos.top && navigations.hasClass('stabled')){

      

      navigations.fadeOut('fast', function(){

                      

        $(this).removeClass('stabled').addClass('default').fadeIn('fast');

      });

    }

    

  });



});

Navegação Em HTML

<div id="mainMenus">

  <div id="navigations" class="default">

    <ul>

      <li><a href="#">PHP Tutorials</a></li>

      <li><a href="#">JQuery Tutorials</a></li>

      <li><a href="#">AJAX Tutorials</a></li>

      <li><a href="#">CSS Tutorials</a></li>

      <li><a href="#">HTML Tutorials</a></li>

    </ul>

  </div>

</div>

Código CSS

body {

  margin: 0;

  padding: 0;

  border: none;

  text-align: left;

  font: normal 13px Verdana, sans-serif;

}



#mainMenus {

  height: 50px;

  margin-top: 15px;

}



#navigations {

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #990000), color-stop(40%, #990000), color-stop(100%, #990000));

  background: -moz-linear-gradient(top, #990000, #990000, #990000); 

  border-radius: 5px;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  line-height: 50px;

  text-align: center;

  margin: 0 auto;

  padding: 0;

}



#content {

  width: 750px;

  margin: 0 auto;

  background:#D1DFF3;

  margin-bottom: 25px;

  padding: 10px;

  text-align:justify;

}



ul {

  padding: 0;

}



ul li {

  list-style-type: none;

  display: inline;

  margin-right: 15px;

}



ul li a {

  color: #fff;

  text-decoration: none;

  text-shadow: 1px 1px 1px #000;

  padding: 10px 7px;

  border-radius: 5px;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  -webkit-transition-property: color, background;

}



ul li a:hover {

  background: #fff;

  color: #333;

}



.default {

  width: 850px;

  height: 50px;

  box-shadow: 0 5px 20px #888;

  -webkit-box-shadow: 0 5px 20px #888;

  -moz-box-shadow: 0 5px 20px #888;

}



.stabled{

  position: fixed;

  top: -5px;

  box-shadow: 0 0 10px #222;

  -webkit-box-shadow: 0 0 40px #222;

  -moz-box-shadow: 0 0 40px #222;

  opacity:0.6;

  width:100%

}



.stabled:hover{

  position: fixed;

  top: -5px;

  box-shadow: 0 0 10px #222;

  -webkit-box-shadow: 0 0 40px #222;

  -moz-box-shadow: 0 0 40px #222;

  width:100%;

  opacity:0.9;

}

Download do código usado neste tutorial > Menu Horizontal Que Segue O Scroll Down Com jQuery

Be Sociable, Share!

•