Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery]Zmiana styli po przewinięciu
Forum PHP.pl > Forum > Przedszkole
kyez
21.02.2014, 21:42:17
Witam.

Mam taki kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6.  
  7. <script src='jquery.js' type="text/javascript"></script>
  8.  
  9.  
  10.  
  11. <style type='text/css'>
  12. @import url(http://fonts.googleapis.com/css?family=Russo+One);
  13. body{
  14.  
  15. 	padding: 0;
  16. 	margin: 0;
  17. }	
  18.  
  19. #wrap{
  20. 	width: 100%;
  21. 	height: 1000px;
  22. 	background: url('bg.jpg');
  23. 	background-size: cover;
  24. 	background-attachment: fixed;
  25. }
  26.  
  27. #title{
  28. 	width: 400px;
  29. 	height: 100px;
  30. 	margin: 0 auto;
  31. 	position: relative;
  32. 	top: 50px;
  33. }
  34.  
  35. p{
  36. 	font-size: 50px;
  37. 	font-family: Russo One;
  38. }
  39.  
  40. #head{
  41. 	width: 100%;
  42. 	height: 80px;
  43. 	position: fixed;
  44. 	top: 0;
  45. 	background: #ddd;
  46.  
  47. }
  48.  
  49. #invisible{
  50. 	width:  100%;
  51. 	height: 950px;
  52.  
  53. }
  54.  
  55. #visible{
  56. 	width:  400px;
  57. 	height: 1000px;
  58. 	margin: 0 auto;
  59. }
  60.  
  61. </style>
  62.  
  63. </head>
  64. <body>
  65.  
  66. <div id='wrap'>
  67. 	<div id='head'>
  68.  
  69. 	</div>
  70.  
  71. 	<div id='title'>
  72. 		<p>Tytuł</p>
  73. 	</div>
  74.  
  75.  
  76. 	<div id='invisible'>
  77.  
  78. 	</div>
  79.  
  80. 	<div id='visible'>
  81. 		<p>treść 1</p>
  82. 	</div>
  83.  
  84. </div>
  85. </body>
  86. </html>
[HTML] pobierz, plaintext


I chodzi o to że jeśli przewinę stronę o jakieś 900 px to tło #head ma się zmienić.
Próbowałem z funkcją .scroll(), ale niestety nie chce mi wyjść.

Pozdrawiam, Przemek.
_Borys_
21.02.2014, 22:03:00
Trzeba sprawdzać wartość $(window).scrollTop(); i po przekroczeniu 900 zmieniać css albo dodać klasę albo usunąć klasę.
[JAVASCRIPT] pobierz, plaintext 
  1. if($(window).scrollTop() > 900){
  2.  
  3. }
[JAVASCRIPT] pobierz, plaintext
kyez
21.02.2014, 22:11:21 
[JAVASCRIPT] pobierz, plaintext 
  1. $(document).ready(function(){
  2.  
  3.  
  4. 		   if($(window).scrollTop > 40){
  5. 			   $("#head").css("background", "blue") 
  6. 		   }  
  7.  
  8.  
  9. });
[JAVASCRIPT] pobierz, plaintext


Niestety nie działa.

PS Dzięki za szybką odpowiedź.
_Borys_
21.02.2014, 22:13:02
Poprawka
[JAVASCRIPT] pobierz, plaintext 
  1. $(window).scroll(function(){
  2.        if($(this).scrollTop() > 900){
  3.            $("#head").css("background", "blue");
  4.         }
  5.        })
[JAVASCRIPT] pobierz, plaintext


Edit:
Jeszcze zabezpieczenie żeby nie grzebało ciągle w stylach przy scrollowaniu
[JAVASCRIPT] pobierz, plaintext 
  1. var s = false;
  2. $(window).scroll(function(){
  3.        if($(this).scrollTop() > 900 && !s){
  4.          $("#head").css("background", "blue");
  5.          s = true;
  6.          }
  7.         else if($(this).scrollTop() <= 900 && s){
  8.            $("#head").css("background", "red");
  9.            s = false; 
  10.         }
  11.         })
[JAVASCRIPT] pobierz, plaintext
kyez
21.02.2014, 22:15:00
Zapomniałem o funkcji anonimowej. ;P
Dzięki wielkie, temat do zamknięcia.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.