Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][CSS]Przyklejona warstwa z menu po prawej stronie.
preibx
post 10.11.2014, 10:35:46
Post #1





Grupa: Zarejestrowani
Postów: 18
Pomógł: 0
Dołączył: 25.09.2006

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Turson
post 10.11.2014, 10:37:29
Post #2





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

css position fixed
Go to the top of the page
+Quote Post
Pyton_000
post 10.11.2014, 10:39:03
Post #3





Grupa: Zarejestrowani
Postów: 8 068
Pomógł: 1414
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----

position:fixed; display: none;
i dodatkowo jQuery zrobienie show() na odpowiedniej wysokości scrollTop.
Go to the top of the page
+Quote Post
preibx
post 10.11.2014, 10:57:01
Post #4





Grupa: Zarejestrowani
Postów: 18
Pomógł: 0
Dołączył: 25.09.2006

Ostrzeżenie: (0%)
-----

Dziękuje za odzew.
Czy mogę prosić o jakis przykład, początek??
Go to the top of the page
+Quote Post
Pyton_000
post 10.11.2014, 11:08:36
Post #5





Grupa: Zarejestrowani
Postów: 8 068
Pomógł: 1414
Dołączył: 26.10.2005

Ostrzeżenie: (0%)
-----

Na szybkiego:
http://jsfiddle.net/ojtLasfp/
Go to the top of the page
+Quote Post
preibx
post 10.11.2014, 12:11:27
Post #6





Grupa: Zarejestrowani
Postów: 18
Pomógł: 0
Dołączył: 25.09.2006

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
Turson
post 10.11.2014, 12:16:32
Post #7





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

Odpal przeglądarkową kosnole i zobacz czy czegos nie wywala
Go to the top of the page
+Quote Post
preibx
post 10.11.2014, 12:49:59
Post #8





Grupa: Zarejestrowani
Postów: 18
Pomógł: 0
Dołączył: 25.09.2006

Ostrzeżenie: (0%)
-----

Niestety nic nie wskazuje, a kod mam taki:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4. 	<title>Testy 01</title>
  5.     <meta charset="utf-8">
  6. </head>
  7. <body>
  8. <style>
  9. .strona {
  10.     height		: 1000px;
  11.     width		: 200px;
  12.     background	: green;
  13. }
  14. .menu {
  15.     height		: 150px;
  16.     width		: 100px;
  17.     background	: blue;    
  18.     position	: fixed;
  19.     left		: 200px;
  20.     display		: none;
  21. }
  22. </style>
  23. <div class="menu">&nbsp;</div>
  24. <div class="strona">&nbsp;</div>
  25.  
  26. <script src="js/jquery-1.11.0.js"></script>
  27. <script>
  28. $(window ).scroll(function(){
  29.     var top = $('body').scrollTop();
  30. if(top > 200) 
  31. {
  32.     $('.menu').show();
  33. } else {
  34.     $('.menu').hide();
  35. }
  36. });
  37. </script>	
  38. </body>
  39. </html>
[HTML] pobierz, plaintext

Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 18.07.2025 - 01:35
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn