Tema: Cabecera con menu fija en pantalla al hacer scroll
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/02/2013, 16:39
MindPaniC
Invitado
  
Mensajes: n/a
Puntos:
Exclamación Cabecera con menu fija en pantalla al hacer scroll
Hola,

lo que quiero hacer se usa mucho ultimamente en infinidad de webs, básicamente quiero que al hacer scroll hacia abajo la cabecera que incorpora un menu horizontal se mantenga en pantalla mientras me desplazo hacia abajo.

Este es el CSS de la cabecera:
Código CSS: 
Ver original
  1. #cabecera {
  2.     width:100%;
  3.     height:90px;
  4.     background-color:#000000;
  5. }
  6. #contenido-cabecera {
  7.     margin:0 auto;
  8.     padding:35px 0 55px;
  9.     width:960px;
  10. }
  11. #logo {
  12.     float:left;
  13.     width:150px;
  14.     color:#fff;
  15.     margin:0;
  16. }
  17. /* MENU */
  18. nav {
  19.     margin:0;
  20.     float:right;
  21.     text-align:center;
  22.     width:810px;
  23. }
  24. nav ul{
  25.     float:right;
  26.     list-style:none;
  27.     margin:0;
  28.     padding:0;
  29. }
  30. nav ul li{
  31.     display:inline;
  32.     text-transform:uppercase;
  33.     font-size:15px;
  34.     font-weight:bold;
  35.     text-align:center;
  36.     margin-left:65px;
  37. }
  38. nav ul li a{
  39.     color:#fe9b00;
  40.     text-decoration:none;
  41. }
  42. nav ul li a:hover {
  43.     color:#E2E2E2;
  44. }
  45. nav .activo a {
  46.     color:#fff;
  47. }

Este es el script jquery:
Código Javascript: 
Ver original
  1. <script>
  2. $(function() {
  3.  
  4.     // grab the initial top offset of the navigation
  5.     var sticky_navigation_offset_top = $('#cabecera').offset().top;
  6.      
  7.     // our function that decides weather the navigation bar should have "fixed" css position or not.
  8.     var sticky_navigation = function(){
  9.         var scroll_top = $(window).scrollTop(); // our current vertical position from the top
  10.          
  11.         // if we've scrolled more than the navigation, change its position to fixed to stick to top,
  12.         // otherwise change it back to relative
  13.         if (scroll_top > sticky_navigation_offset_top) {
  14.             $('#cabecera').css({ 'position': 'fixed', 'top':0, 'left':0 });
  15.         } else {
  16.             $('#cabecera').css({ 'position': 'relative' });
  17.         }  
  18.     };
  19.      
  20.     // run our function on load
  21.     sticky_navigation();
  22.      
  23.     // and run it again every time you scroll
  24.     $(window).scroll(function() {
  25.          sticky_navigation();
  26.     });
  27.  
  28. });
  29. </script>

Pues nada que no ocurre nada se mantiene al cabecera en su sitio. ¿cómo puedo hacerlo?

Saludos.