2011-10-27 12 views
11

Tak więc tworzę stronę, która jest podzielona na dwie kolumny. Te kolumny idą do wysokości przeglądarki i pojedynczo wypełniają 50% ekranu. Podstawowy przykład:Modyfikuj kierunek przewijania

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

Zaprojektowałem to. Każda kolumna to div i oba przewijają się w pionie. To, czego chcę, to móc przewijać div, a kierunek przewijania po prawej idzie w przeciwną stronę do tej po lewej; ale przewijają w tym samym czasie.

Chciałbym również pojedynczy pasek przewijania po prawej stronie (jak normalne pionowe miejsce), ale kiedy przewijasz to, jedna strona idzie w górę, a druga strona spada.

Czy ktoś może pomóc tutaj? Albo wskazać mi konkretny kierunek?

Przykład: http://buero-buero.org/

+0

czy kasy paralaksy przewijania? –

Odpowiedz

10

Bezwstydnie skradziony przez strony, której link jest dość banalna:

<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> 

Edit:

Odpowiadając na twój komentarz:

) window.scrollY to kwota pionowego przewijania strony, po prostu pozycja bezwzględna jest równa #down div z odwrotną pozycją bezwzględną. Jeśli go nie rozumiesz, powinieneś przynajmniej trochę z nim pogodzić, aby to zrozumieć, lub lepiej, jak działa window.scrollY i jquery.

B) To nie ilość kodu, na który można umieścić kredyty ... to nie kradzież, ale po prostu nie wymyślanie koła.

C) Nie rozumiem, przepraszam, #down-right jest to, o co pytasz w swoim pytaniu: a div przewijanie w kierunku przeciwnym do paska przewijania.

Edycja ponownie:

Nie zapomnij dać do obejrzenia css też:

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

Haha. Widziałem to na ich stronie, ale: A) Nie rozumiem tego. Czy ktoś może wyjaśnić? B) Nie chcę tego ukraść. C) Ponadto, jeśli przewiniesz do HTML, masz inne elementy. "up-left" na przykład. – user981458

+0

Muszę zapytać! Źródło jest zaszyfrowane na ich stronie, jak to ukraść? – CyberFox

+1

To nie było do czasu, gdy odpowiedziałem;) – neurino