Menú con transición al hacer scroll con css
Ejemplo de como hacer un menú con transición al hacer scroll con css fácil, a continuación tenemos un código de ejemplo y una demo en funcionamiento.
Importante saber que es necesario usar jquery para hacerlo con este método sencillo, ahora la función principal:
Editado
Importante saber que es necesario usar jquery para hacerlo con este método sencillo, ahora la función principal:
$(window).scroll(function(){ //al hacer scroll hacia abajo agregamos la clase con transición if($(this).scrollTop() > 0) { $('header').addClass('menu-scroll'); //al llegar arriba la removemos } else { $('header').removeClass('menu-scroll'); } });el código completo:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(window).scroll(function(){ //al hacer scroll hacia abajo agregamos la clase con transición if($(this).scrollTop() > 0) { $('header').addClass('menu-scroll'); //al llegar arriba la removemos } else { $('header').removeClass('menu-scroll'); } }); </script> <style> body { min-height: 2000px; } header { width: 200px; background: #ddd; position: fixed; left: 50%; right: 50%; margin-top: 40px; -webkit-transition: 0.2s !important; -o-transition: 0.2s !important; transition: 0.2s !important; } .menu { padding: 0; margin: 0 auto; } .menu li { float: left; list-style: none; } .menu li a { text-decoration: none; padding: 10px; } .menu-scroll { margin-top: 0; -webkit-transition: 0.2s !important; -o-transition: 0.2s !important; transition: 0.2s !important; } </style> <header> <ul class="menu"> <li><a href="">ITEM</a></li> <li><a href="">ITEM</a></li> </ul> </header>demo
Editado
0
Puntos
Puntos
1915
Visitas
Visitas
0
Resp
Resp
Por alber hace 71 meses
Administrador