2011-10-27 20 views
11

Así que, básicamente, estoy creando un sitio que se divide en dos columnas. Estas columnas están en la altura del navegador y se llenan individualmente el 50% de la pantalla. Ejemplo básico:Modificar la dirección de desplazamiento

------------- 
|  |  | 
| up | down | 
|  |  | 
------------- 

Lo he diseñado. Cada columna es un div y ambas se desplazan verticalmente. Lo que quiero es poder desplazar cualquier div y la dirección de desplazamiento a la derecha va en dirección opuesta a la de la izquierda; pero se desplazan al mismo tiempo.

También me gustaría tener una sola barra de desplazamiento a la derecha (como un sitio vertical normal) pero cuando la desplazas, un lado sube y el otro lado baja.

¿Alguien puede ayudar aquí? ¿O señalarme en una dirección particular?

Ejemplo: http://buero-buero.org/

+0

han checkout scroll parallax? –

Respuesta

10

robado descaradamente por la página que vincula, es bastante trivial:

<script> 
function crisscross() { 
$('down-left').style.bottom = '-' + window.scrollY + 'px'; 
$('down-right').style.bottom = '-' + window.scrollY + 'px'; 
$('left').style.left = '-' + window.scrollY + 'px'; 
$('right').style.right = '-' + window.scrollY + 'px'; 
} 
</script> 

Editar:

responder a su comentario:

Un) window.scrollY es la cantidad de desplazamiento vertical de la página, solo posición absoluta su div #down con una posición absoluta inversa. Si no lo entiende, al menos debe meterse con él por un tiempo para entenderlo o, mejor, aprender cómo funcionan window.scrollY y jquery $().style.

B) No es la cantidad de código en el que puede poner créditos ... no es robar, sino simplemente no reinventar la rueda.

C) No entiendo el punto, lo siento, #down-right es lo que está haciendo en su pregunta: un div desplazándose en la dirección opuesta a la barra de desplazamiento.

de nuevo Edit:

No se olvide de dar un vistazo a CSS también:

div#down-right { 
    bottom: 0; 
    position: fixed; 
    right: 6%; 
} 
+0

Haha. Ya lo he visto en su sitio, pero: A) No lo entiendo. ¿Alguien puede explicar? B) No quiero robarlo. C) Además, si se desplaza hacia abajo al HTML, tiene otros elementos. "arriba-izquierda" por ejemplo. – user981458

+0

¡Debo preguntar! La fuente está encriptada en su página, ¿cómo la robaste? – CyberFox

+1

No fue en el momento en que contesté;) – neurino

Cuestiones relacionadas