Forum PHP.pl > [JavaScript][CSS]Przyklejona warstwa z menu po prawej stronie.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][CSS]Przyklejona warstwa z menu po prawej stronie.

preibx

10.11.2014, 10:35:46

Witam.
Na stronie jeep.pl jest wdrożony taki efekt:

http://jeep.pl/cherokee_2014/cherokee.html

Przyklejona warstwa z menu po prawej stronie, która przesuwa się wraz z przewijaniem w dół witryny.
Wygląd zewnętzny
Wnętrzne
....
.....
Nie wiem jak się nazywa ten efekt.
Proszę o pomoc w znalezieniu jakieś poradnika lub tutorialu.
Z góry dziękuje za pomoc.

Turson

10.11.2014, 10:37:29

css position fixed

Pyton_000

10.11.2014, 10:39:03

position:fixed; display: none;
i dodatkowo jQuery zrobienie show() na odpowiedniej wysokości scrollTop.

preibx

10.11.2014, 10:57:01

Dziękuje za odzew.
Czy mogę prosić o jakis przykład, początek??

Pyton_000

10.11.2014, 11:08:36

Na szybkiego:
http://jsfiddle.net/ojtLasfp/

preibx

10.11.2014, 12:11:27

Dziękuje.
Biorę się do wdrażania rozwiązania na mój projekt.
Pozdrawiam.

Co może być przyczyną, że twoje rozwiązanie działa na Chrome, ale pod Firefox nie?

Turson

10.11.2014, 12:16:32

Odpal przeglądarkową kosnole i zobacz czy czegos nie wywala

preibx

10.11.2014, 12:49:59

Niestety nic nie wskazuje, a kod mam taki:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html lang="pl">
<head>
	<title>Testy 01</title>
    <meta charset="utf-8">
</head>
<body>
<style>
.strona {
    height		: 1000px;
    width		: 200px;
    background	: green;
}
.menu {
    height		: 150px;
    width		: 100px;
    background	: blue;    
    position	: fixed;
    left		: 200px;
    display		: none;
}
</style>
<div class="menu">&nbsp;</div>
<div class="strona">&nbsp;</div>
 
<script src="js/jquery-1.11.0.js"></script>
<script>
$(window ).scroll(function(){
    var top = $('body').scrollTop();
if(top > 200) 
{
    $('.menu').show();
} else {
    $('.menu').hide();
}
});
</script>	
</body>
</html>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.