Copiar la nav bar de Twitter!

Pixeltwo · #1 (**permalink**) 24/07/2011, 02:41

Buenas, he buscado por el foro pero no he visto ningun ejemplo igual a lo que ando yo buscando...

Esto en vez de una consulta es mas bien algo asi como un reto, porque sencillamente yo no he sido capaz ( hasta ahora ).

El reto consiste en copiar el efecto que crea twitter en la navigation bar... resulta que si, a simple vista esa barra está en position:fixed.. pero un fixed a la hora de scroll no hace caso...

¿Qué solucion puede tener esto? " a lo mejor hay algo de lo que no estoy enterado "....

A mi dado el grado de desesperacion, lo maximo que se me ocurre ya es hacerlo con Jquery afectando sus valores css... pero es un poco " raro " y aun no me acaba de cuajar la idea en la cabeza..

Hasta el momento he venido usando unicamente CSS en esto.
Hagan la prueba, coloquen la ventana en twitter, hagan scrooll horizontal (poned la ventana mas pequeña logico) y vereis como ese div ( el supuesto Fixed ) tambien se mueve... y mirando por encima en las propiedades css de la hoja de twitter, hay 3 Divs:

Cita:

[-> 1 (el que está fixed ).
-> 2 ( div al medio, lo cual parece usar un text-align:center[yo suelo usar el margin-left; margin-right: auto para esto...).
-> 3 (otro div en esta ocasion text-align:left).

Por el momento no he podido descubrir mas... hice el intento por mi cuenta pero no funciona

Espero alguien milagroso pueda dar con la solución!!

Muchisimas Gracias!
Un fuerte abrazo

Batan · #2 (**permalink**) 24/07/2011, 02:50

Buenas.
A lo mejor en tu navigator bar, te olvidaste poner la propiedad:

display: scroll;

Aun asi deberias poner un poco de código para ver cual seria el fallo.

Saludos

Pixeltwo · #3 (**permalink**) 24/07/2011, 03:55

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body{
    margin:0px;
    background-color:gold;
    }
    
/*Div fixed*/   
#a1{
    background-color:white;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    height:80px;
    z-index:20;
    margin:0px;
    }
/*Contenido dentro del div fixed*/  
#a2{
    position:relative;
    text-align:center;
    color:#fafafa;
    width:910px;
    background-color:blue;
    margin-left:auto;
    margin-right:auto;
    
    }
/*div contenedor principal*/
#a3{
    margin-left:auto;
    margin-right:auto;
    width:910px;
    min-height:700px;
    margin-top:100px;
    background-color:#fafafa;
    }
/*contenido dentro de contenedor*/  
#a4{
    color:#000;
    font-size:16px;
    margin-left:30px;
    margin-right:30px;
    }
</style>
</head>
<body>
 
<div id="a1"><!--El reto es conseguir que este div se mueva a la vez que el contenedor cuando se hace scroll horizontal al poner la ventana del navegador mas pequeña o mismamente usar un monitor con baja resolución.-->
    <div id="a2">Esto tiene que estar centrado</div>
</div>
<div id="a3">
    <div id="a4">Contenido aqui...</div>
</div>
 
</body>
</html>

No es mas que un codigo que he hecho para la cuestión, no el que ando desarrollando (claramente).

Está comentada esa parte que tanto menciono.. por el momento sigo probando y pensando, pensando pero nada... CSS me limita... estoy empezando a pensar que en twitter han usado javascript...
Saludos!

Pixeltwo · #4 (**permalink**) 24/07/2011, 04:09

Definitivamente me retraigo, no creo que haya nada posible en CSS para que esas dos cosas coordinen, tocó irse por Jquery de modo que a la hora de mover el scroll se mueva ese contenido del div.. no hay otra !!

Batan · #5 (**permalink**) 24/07/2011, 04:19

Twiter debe de usar sus cosas, pero ese navigator tambien se puede hacer con CSS.

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
<div style="display: scroll; position: fixed; border: 1px black; color: white; top: 0px; background: black; width: 1990px;">Navegador</div>
 <body>
Cuerpo de tu página
 </body>
</html>

Con este Script ya puedes conseguir lo mismo que Twiter, editandolo a tu manera claro.
Tan solo con poner el div antes del Body y asignandole esas propiedades ya estará echo.
Luego ya seria hacer que tu página tengo tanto contenido posible como para usar el scroll.

Espero haberte ayudado.
Saludos.

Batan · #6 (**permalink**) 24/07/2011, 04:25

Perdona creo que ya entendi a lo que te referias, lo siento.
Pues vere haber.

Pixeltwo · #7 (**permalink**) 24/07/2011, 11:37

Bien jeje! :)

Bueno he encontrado un plugin que parece mover un div en base al scroll, no obstante lleva una animación en si, por ende, suspenderé la animacion y veremos que ocurre..

Postearé cuando lo consiga!!

Saludos