html - navegacion - overflow css
Desplazar contenidos DIV particulares con la barra de desplazamiento principal del navegador (6)
Estoy trabajando en el nuevo diseño de mi sitio y me encuentro con el sitio GIZMODO . Descubrí que el sitio puede utilizar la barra de desplazamiento de la página para desplazarse por una parte de los contenidos del sitio. ¿Cómo pueden hacerlo? Estudié su CSS a través de Firebug, pero estoy bastante confundido.
Aquí está mi página de prueba 1: http://raptor.hk/dev/theme/dummy.html (esta página puede centrar los contenidos, pero no puede desplazarse como yo quiera)
Aquí está mi página de prueba 2: http://raptor.hk/dev/theme/dummy2.html (esta página puede desplazarse como yo quiera, pero no puede centrar)
Solo quiero hacer que la página con el contenido del lado izquierdo se desplace con la barra de desplazamiento de la página, pero el lado derecho permanece en la posición original, además todo el sitio debe alinearse en el centro, es decir, combinar mi página de prueba 1 y 2. ¿Alguien puede darme algunas luces? ?
Aunque su ejemplo de Gizmodo utiliza scripts adicionales para el manejo de (la barra de desplazamiento vertical de) la barra lateral (que incluso no funciona en todos los navegadores), el efecto es perfectamente posible con CSS puro e incluso no es tan difícil como puede parecer a primera vista.
Entonces quieres:
- Un diseño centrado horizontalmente, posiblemente ampliado o reducido para diferentes tamaños de ventanas del navegador,
- El contenido principal a la izquierda que se puede desplazar verticalmente por la barra de desplazamiento principal del navegador,
- Una barra lateral a la derecha que se pega a la parte superior de la ventana del navegador, se puede desplazar por separado del contenido principal y solo muestra su barra de desplazamiento cuando el mouse pasa el mouse por encima. Cuando se desplaza al final de la barra lateral, la barra de desplazamiento de la ventana toma el control.
Mira este violín de demostración que hace todo eso.
La hoja de estilo:
html, body, * {
padding: 0;
margin: 0;
}
.wrapper {
min-width: 500px;
max-width: 700px;
margin: 0 auto;
}
#content {
margin-right: 260px; /* = sidebar width + some white space */
}
#overlay {
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
#overlay .wrapper {
height: 100%;
}
#sidebar {
width: 250px;
float: right;
max-height: 100%;
}
#sidebar:hover {
overflow-y: auto;
}
#sidebar>* {
max-width: 225px; /* leave some space for vertical scrollbar */
}
Y el marcado:
<div class="wrapper">
<div id="content">
</div>
</div>
<div id="overlay">
<div class="wrapper">
<div id="sidebar">
</div>
</div>
</div>
Probado en Win7 en IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.
Asumí un ancho fluido para el contenido principal y un ancho estático para la barra lateral, pero ambos pueden ser perfectamente fluidos, como desee. Si desea un ancho estático, vea este violín de demostración que simplifica el marcado.
Actualizar
Si entiendo tu comentario correctamente, entonces quieres evitar el desplazamiento del contenido principal cuando el mouse está sobre la barra lateral. Para eso, la barra lateral puede no ser un elemento secundario del contenedor de desplazamiento del contenido principal (que era la ventana del navegador), para evitar que el evento de desplazamiento burbujee hasta su elemento primario.
Creo que este nuevo violín de demostración hace lo que quieres:
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
Esta técnica se ve en muchos sitios web hoy en día. Lo que hacen es dar position: fixed al div en el lado derecho de la pantalla, para que no se vea afectado por el desplazamiento de la página.
CSS:
body {
position: relative;
}
#leftSide {
width: 600px;
...rules ...
}
#rightSide {
position: fixed;
left: 610px;
}
HTML:
<body>
<div id="leftSide">
affected by scrolling
</div>
<div id="rightSide">
Not affected by scrolling
</div>
</body>
No entiendo bien tu pregunta. Pensé que querías que la barra de desplazamiento principal también desplazara cosas en otro div. Bueno, aquí tienes:
$(function(){
$(document).scroll(function(){
$(''#my_div'').stop().animate({
scrollTop : $(this).scrollTop()
});
});
});
Demostración: http://jsfiddle.net/AlienWebguy/c3eAa/
Puedes hacer esto con la position:fixed . La parte relevante de la hoja de estilos de GIZMODO:
#rightcontainer {
position: fixed;
margin-bottom: 10px;
width: 300px;
height: 100%;
top: 0;
}
Supongo que estás buscando algo como esto.
Tenga en cuenta que puede modificar el ancho de #main_content como desee, siempre que no quede "detrás" de su menú fijo ya que su texto desaparecerá.
El truco para obtener el menú fijo a la derecha en su contenedor centrado es usar a la left: 50% y margin-left para ajustarlo correctamente.
Por ejemplo. Tiene un ancho de container de 960px y un ancho de menú fijo de 300px , con el left: 50% , habrá un espacio en blanco de (960/2 - 300 = 180) a la derecha del menú fijo. Luego simplemente ajústelo con margin-left: 180px;
Una forma de "centrar" la página (es decir, contenido + panel derecho) es ajustar los márgenes mientras se fija la posición correcta del panel derecho. Por lo tanto, si tiene un div#content y un div#rightPanel , el CSS puede verse algo así como:
#content {
margin-left: 15%; /* left page margin */
margin-right: 25%; /* right page margin + rightPanel''s width */
}
#rightPanel {
position: fixed;
top: 0;
right: 15%; /* right page margin */
width: 10%;
}
Solo asegúrese de que el margen izquierdo de #content sea el mismo que el margen derecho de #rightPanel .
Aquí hay un ejemplo: http://jsfiddle.net/william/ZruS6/1/ .