Ver Mensaje Individual
  #9 (permalink)  
Antiguo 15/06/2013, 20:22
Avatar de twilvaro
twilvaro
 
Fecha de Ingreso: febrero-2012
Ubicación: La Línea (Cádiz)
Mensajes: 47
Antigüedad: 12 años, 2 meses
Puntos: 5
Respuesta: web sin scroll

La solución de pzin es completamente funcional. Luego, simplemente fija el menú y añade anclas a los enlaces. Aun sin barras de desplazamiento, al hacer click en cada ítem de la navegación se desplazará al apartado de la web indicado. Con esto, tampoco hay absolutamente ningún problema en hacerla responsive. Sería como desarrollar cualquier otra One-Page responsive. Eso sí, añade "height: 100%; overflow: hidden;" al contenedor cuando acabes de desarrollarla, para trabajar el prototipado cómodamente.

Aquí te dejo un ejemplo funcional: http://jsfiddle.net/twilvaro/VhegM/.

¿JavaScript? Para la función en sí no lo veo necesario. En el ejemplo sí que utilizo un plugin JS (desarrollado con la librería jQuery) para que el desplazamiento sea suave. Se llama SmoothScroll.js.

Otra cosa. Si lo que quieres es que cada bloque de contenido (para entendernos, cada div en el ejemplo) tenga el mismo alto que la del navegador (o la resolución del dispositivo en el que se vea), existe una nueva medida llamada Viewport's units. Puedes modificar el "height: 600px" que le doy en el ejemplo a los divs por "height: 100vh". Esto hará que no sólo sea el contenedor el que ocupe el 100% del alto de la pantalla, sino que cada sección también ocupará exactamente el alto del dispositivo con el que se vea. Eso sí, ojo con las compatibilidades: http://caniuse.com/#search=vh. Hay un polyfill de la genia Lea Verou, pero no lo he probado ni leído mucho sobre él, así que no te puedo asegurar que funcione totalmente: https://gist.github.com/LeaVerou/1347501.

Un saludo!

Última edición por twilvaro; 15/06/2013 a las 22:14