|
//js |
|
function sticky_relocate() { |
|
var window_top = jQuery(window).scrollTop() + 0; |
|
var div_top = jQuery('#sticky-anchor').offset().top; |
|
if (window_top > div_top) |
|
jQuery('#navbar').addClass('sticky') |
|
else |
|
jQuery('#navbar').removeClass('sticky'); |
|
} |
|
|
|
jQuery(function() { |
|
jQuery(window).scroll(sticky_relocate); |
|
sticky_relocate(); |
|
}); |
|
//js |
|
//css |
|
#block-system-main-menu .menu.nav { |
|
padding-top: 42px; //centrar menu verticalmente para que no se pegue en el top del header |
|
transition: all 0.3s; |
|
} |
|
.navbar .navbar-header a img{ |
|
height: 112px; //altura de imagen cuando no se haya hecho scroll |
|
//las siguientes lineas son para animacion del la imagen cuando se vuelve al top de la pagina |
|
-moz-transition-property: height; |
|
-o-transition-property: height; |
|
-webkit-transition-property: height; |
|
transition-property: height; |
|
-moz-transition-duration: 0.3s; |
|
-o-transition-duration: 0.3s; |
|
-webkit-transition-duration: 0.3s; |
|
transition-duration: 0.3s; |
|
} |
|
//esilo aplicado cuando ya se haya hecho scroll |
|
.sticky{ |
|
background-color: #78bf22; |
|
margin-bottom: 0; |
|
position: fixed !important; |
|
z-index: 300; |
|
width: 100%; |
|
top: 0; |
|
-moz-transition-property: height; |
|
-o-transition-property: height; |
|
-webkit-transition-property: height; |
|
transition-property: height; |
|
-moz-transition-duration: 0.3s; |
|
-o-transition-duration: 0.3s; |
|
-webkit-transition-duration: 0.3s; |
|
transition-duration: 0.3s; |
|
transition-duration: 0.3s; |
|
} |
|
.sticky img{ |
|
height: 50px !important; //tamano de imagen cuando se haya hecho scroll |
|
width: auto !important; |
|
-moz-transition-property: height; |
|
-o-transition-property: height; |
|
-webkit-transition-property: height; |
|
transition-property: height; |
|
-moz-transition-duration: 0.3s; |
|
-o-transition-duration: 0.3s; |
|
-webkit-transition-duration: 0.3s; |
|
transition-duration: 0.3s; |
|
} |
|
.sticky #block-system-main-menu .menu.nav { |
|
padding-top: 0px !important; //subir el menu en el top |
|
transition: all 0.3s; |
|
} |
|
|
|
|
|
|
|
//css |
|
|
|
//estructura html |
|
|
|
<div id="sticky-anchor"></div> //si este contenedor llega al top de la pagina entonces se agrega la clase sitcky al header |
|
<header id="navbar" role="banner" class="navbar navbar-default"> //al lado de "navbar-default" se agregua la clase sitcky |
|
//aqui deberia ir el menu y el logo |
|
</header> |
|
//estructura html |
Hola amigo, me ha servido mucho, muchas gracias.