Mantener un encabezado siempre a la vista

Estoy diseñando mi sitio web y estoy tratando de encontrar una manera de mantener un encabezado siempre en la pantalla.Mantener un encabezado siempre a la vista

Por poner un ejemplo, echa un vistazo a this página extralarga en Wikia.com. Tenga en cuenta que cuando se desplaza por la página, la pequeña barra de herramientas situada en la parte inferior permanece en un solo lugar. Sin embargo, desplácese hasta la parte inferior de la página y se dará cuenta de que la barra de herramientas permanece en una posición fija hasta que se salga de la vista.

Esto es lo que me gustaría hacer, pero a la inversa. Tenga un encabezado que permanezca en una posición fija en la página web, pero cuando no estaba a la vista, colóquelo en la parte superior.

Intenté buscar un ejemplo en DynamicDrive.com (buscar Dock Content Script, porque no puedo publicar otro enlace), pero descubrí que era demasiado nervioso para mí.

¿Alguien puede ayudarme a hacer esto?

Gracias de antemano.
~ DragonXDoom

P.S. Ahora que lo he notado, el cuadro Cómo formatear a la derecha de la página de envío de preguntas tiene este efecto.

Fuente

2010-12-30 DragonXDoom

Mi respuesta (que es aceptada por el OP) ha sido eliminada debido a un enlace muerto. He actualizado mi respuesta con código y una demostración en funcionamiento en jsfiddle. Trataré de eliminar mi respuesta (no puedo hacerlo yo mismo) ... –

HTML:

<div id="wrap"> 
    <div id="header"> HEADER </div> 
    <div id="navigation"> NAVIGATION </div> 
    <div id="content"> CONTENT </div>   
</div>

JavaScript:

(function() {  
    var nav = $('#navigation')[0], 
     top = $(nav).offset().top, 
     left, 
     height = $(nav).outerHeight(), 
     width = $(nav).width(), 
     fixedClass = 'fixed'; 

    function pageOffset() { 
     return window.pageYOffset || document.body.scrollTop; 
    } 

    $(window). 
      resize(function() { 
       left = $(nav).offset().left; 
      }). 
      scroll(function() { 
       $(nav).toggleClass(fixedClass, pageOffset() > top); 

       if ($(nav).hasClass(fixedClass)) { 
        $(nav). 
         css({ 'left': left, 'width': width }). 
         prev().css({ 'marginBottom': height }); 
       } else { 
        $(nav). 
         prev().andSelf().removeAttr('style'); 
       } 
      }). 
      trigger('resize');  
})();

Demostración en directo:http://jsfiddle.net/simevidas/Mx8hC/show/

Fuente

2010-12-30 02:55:17

¡Muchas gracias! ¡Esto es exactamente lo que buscaba! – DragonXDoom

Puede usar el posicionamiento CSS para resolver esto. El siguiente enlace contiene instrucciones sobre lo que necesita, creo.

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Edit: Lo siento leí mal, éstos deben trabajar para los encabezados también.

http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/

http://davidchambersdesign.com/css-fixed-position-headers/

Esperamos que estas ayuda.

Fuente

2010-12-30 02:19:16

+1 para la posición fija – JustcallmeDrago

Lo siento, debería haber sido un poco más claro. El encabezado que intento afectar no es el elemento superior en mi página. Si uso position: fixed, el encabezado simplemente flota en el medio de la página. Quiero probar y hacerlo de manera que actúe como un elemento normal hasta que el usuario se desplace para que quede fuera de la vista. Entonces me gustaría que actúe como en esos encabezados a los que hace referencia en su publicación. Gracias, pero no me ayudó. – DragonXDoom

Intentando entender, por lo que el elemento está en el medio de la página, el usuario comienza a desplazarse, el elemento se encuentra en la parte superior de la página y luego se "pega" allí para convertirse en un elemento de encabezado, ¿es así? Podría considerar una solución jQuery. ¿Necesitaría tener un evento para cuando un elemento toque la parte superior de la ventana gráfica visible, sin estar seguro de si hay alguno? –

Recuerde siempre si tiene que pegar el encabezado o pie de página { position : fixed; } se puede utilizar.

lo que se aplican CSS como esto:

.header{ 
    top:0; 
    width:100%; 
    height:50px; 
    position:fixed; // this is the key 
}

Fuente

2010-12-30 02:45:19 Wazzzy

Si desea que se quede pegado a la parte superior incluso cuando el usuario se desplaza (es decir pegado a la parte superior de la ventana del navegador), utilice:

.top-bar { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    margin: 0; 
}

O simplemente a la de la la página:

.top-bar { 
    margin: 0; 
    width: 100%; 
}

Fuente

2011-10-16 08:57:54 bricker

//header// 

    <!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
     <title><?php echo SITE_NAME; if(isset($page_title)){ echo ' :: '.$page_title;}?></title> 
     <meta name="Description" content="<?php echo $SITE_NAME;?>" /> 
     <meta name="robots" content="all, index, follow" /> 
     <meta name="distribution" content="global" /> 
     <link rel="shortcut icon" href="/favicon.ico" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
     <link href="<?php if(isset($include_file_ext)){ echo $include_file_ext;}?>css/style.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
    <div id="container"> 
    <div id="header"> 
    <h1><?php echo SITE_NAME;?></h1> 
    </div> 
    <div id="navigation"> 
    <ul> 
    <li><a href="/photosharing/">Home</a></li> 
    <!-- 
    <li><a href="#">About</a></li> 
    <li><a href="#">Services</a></li> 
    <li><a href="#">Contact us</a></li>--> 
    </ul> 
    </div> 
    <div id="content"> 

//footer 


</div> 
<div id="footer"> 
     Copyright &copy; <?php echo SITE_NAME.' , '.date('Y');?> 
    </div> 
</body> 
</html> 

//css 
body,td,th { 
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #333; 
} 
body { 
    margin-left: 0px; 
    margin-top: 30px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
} 
.maindiv{ width:690px; margin:0 auto;} 
.textbox{ padding:2px 4px; width:200px;} 
.submit{ border:solid 1px #008000; background:#008000; color:#FFF; font-weight:bold;} 
#container 
{ 
    margin: 0 30px; 
    background: #fff; 
} 

#header 
{ 
    background: #ccc; 
    padding: 20px; 
} 

#header h1 { margin: 0; } 

#navigation 
{ 
    float: left; 
    width: 100%; 
    background: #333; 
} 

#navigation ul 
{ 
    margin: 0; 
    padding: 0; 
} 

#navigation ul li 
{ 
    list-style-type: none; 
    display: inline; 
} 

#navigation li a 
{ 
    display: block; 
    float: left; 
    padding: 5px 10px; 
    color: #fff; 
    text-decoration: none; 
    border-right: 1px solid #fff; 
} 

#navigation li a:hover { background: #383; } 

#content 
{ 
    clear: left; 
    padding: 20px; 
} 

#content h2 
{ 
    color: #000; 
    font-size: 160%; 
    margin: 0 0 .5em; 
} 

#footer 
{ 
    background: #ccc; 
    text-align: right; 
    padding: 20px; 
    height: 1%; 
}

Fuente

2013-01-07 06:34:16 user1953692

Mantener un encabezado siempre a la vista

Respuesta

Cuestiones relacionadas