Deslizamiento con click en enlace y navegador en top

anewryzm · #1 (**permalink**) 14/09/2012, 16:49

Hola que tal.
Me gustaría saber si podria obtener ayuda.
:S

En ésta web [URL="http://monomi.co/"]monomi.co[/URL] se utilizan estilos que no sé como aplicarlos.
Por ejemplo:
Al deslizarse, la barra de navegación permanece quieta. Leí que esto se hace con "position: fixed" pero al hacerlo se me mueve todo. Es más, en Monomi cuando la barra de navegacion se mueve. se activa la sobra en el bottom del nav.

Otra cosa más. Cuando dan click a alguno de los enlaces. éste hace que se deslice hasta la ubicacion donde se encuentra el "<a id=""></a>" pero cuando lo hace. lo hace lento y se ve bastante bien.

He intentado hacerlo pero la verdad no me ha salido nada bien.

Quisiera saber si lo puedo hacer con CSS3 y HTML5 o si necesito otra tecnologia como Javascript.

De antemano gracias.

noruas · #2 (**permalink**) 14/09/2012, 17:24

Lo de al hacer click he ir a una ID se hace con un ancla (aunque no se si en esa web especificamente lo hacen con eso) y lo de que este arriba quieta aunque se deslice la web es con la propiedad fixed.

Los efectos seguramente sean via js.

Para usar la propiedad fixed has de especificar en que posicion ha de quedar anclado el div en cuestion.

Busca info sobre position:fixed y anclas, es bastante sencillo de usar. Lo de las anclas está descatalogado actualmente y no validan, aunque se siguen usando. No se cuales son las etiquetas actuales para conseguir el mismo efecto.

Aquí te dejo un ejemplo sencillo.

Código HTML:

Ver original<html>
<head>
<style type="text/css">
    #header {width: 100%; height: 120px; position:fixed; top:0px; left:0px; background-color:#09C;}
    .cuerpo {margin-top: 140px;}
    br {margin-bottom: 2000px;}
</style>
</head>
<body>
    <div id="header">
        <a href="#prueba">Prueba</a>
    </div>
    <div class="cuerpo">
        empezamos<br />
        <a id="prueba"></a>Ejemplo 1, terminamos
    </div>
</body>
</html>

anewryzm · #3 (**permalink**) 14/09/2012, 22:20

Parece que no has visitado la página. lo de las anclas lo he intentado y la posicion fixed tambien.
Necesito que se vea algo parecido.

[URL="http://monomi.co"]monomi.co[/URL]

noruas · #4 (**permalink**) 15/09/2012, 02:39

Si la he visto, pero todos esos efectitos tan chulos seguramente esten hechos con jscript o similar.

Respecto a la barra de arriba se hace con lo que te he puesto. Y lo mismo con los links.

Pero claro que no se ve parecido, tendrias que crear los estilos para que se viera parecido. Yo solo te he dicho como empezar xD, el resto es cosa de usted.