Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Div podążający za ekranem ale dopiero od pewnego momentu...
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
emitra
11.10.2007, 07:04:13
Witam serdecznie.
Potrzebuje pomocy i za wszelkie pomysły będę niezmiernie wdzięczny.

Na początek obrazek który zobrazuje problem opisany pod nim.



Legenda:
To czerwone to jakiś obiekt powiedzmy Obrazek albo <div> bedący nagłówkiem kolumny..

Problem:
Chciał bym żeby po załadowaniu strony gdy "Czerwony Obiekt" jest ładnie widoczny był on na miejscu tak jak widac na rysunku z lewej.

Następnie gdy zjeżdżamy skrollem w dół i dochodzimy do momentu ze "Czerwony Obiekt" zaczyna znikac z ekranu ten podąża za nami.


Moj pomysł:
Moim, pomysłem było by wykryć moment znikania "Czerwony Obiekt" i przelaczyc go w tym momencie na position: fixed jednak jak to wykryc.
Probowałem z offsetTop jednak on wskazuje w FF i IE zawsze przesuniecie w pionie wzgledem poczatku strony a nei tego co widzimy.
Probowałem ustawić ukrytego DIVa w pozycji fixed i odejmowac ich offsety od siebie niestety offsetTop obiektu w possition: fixed jest staly co dla mnie jest czyms niezrozumialym skoro sie przemiszcza rrazem z tym co widzimy a jego offsetTop wciaz bez zmian.

Moze istnieje inny parametr niz offsetTop który mogę wykorzystac. a moze jest jaksi prostrzy sposob.

Sprawa dość pilna bo dalsze prace w projekcie czekaja na rozwiazanie lub nie. Twego problemu.
Aha zastępowanie "glowego Diva" Iframem nei wchodzi w gre.

Z pozdrowieniami
czekający na pomoc smile.gif
Stalos
11.10.2007, 19:52:04 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script>
  4. var t_nazwaPrzegladarki = navigator.appName;
  5. var m_IE = false;
  6. var m_Y = 0;
  7. var m_Y_zmiana = 0;
  8. var licznik = 0;
  9.  
  10.  
  11.         m_IE = (t_nazwaPrzegladarki.indexOf("Explorer")>=0)?true:false;
  12.  
  13.          onload = function(){
  14.         	window.onscroll = sprawdzaj;
  15.         }
  16.  
  17.  
  18.         function mierz_odleglosc(){
  19.         	var obrazek = document.getElementById("obrazek");
  20. 	m_Y = obrazek.offsetTop;
  21.         }
  22.  
  23.         function mierz(){
  24.         	if (!m_IE) document.captureEvents(Event.MOUSEMOVE);
  25.         	document.onmousemove = pobierz_wspolrzedne;
  26.  
  27.         	function pobierz_wspolrzedne(e) {
  28.                 	if (m_IE) { 
  29.         		m_Y_zmiana = event.clientY + document.body.scrollTop;
  30. 		} 
  31. 	else {
  32. 		m_Y_zmiana = e.pageY;
  33. 		}
  34.  
  35. 	if (m_Y_zmiana < 0){
  36. 		m_Y_zmiana = 0;
  37. 	}
  38.  
  39. 	}
  40.         }        
  41.  
  42.         function sprawdzaj(){
  43. 	var obrazek = document.getElementById("obrazek");
  44.         	mierz_odleglosc();
  45.         	window.onmousemove = mierz;
  46.  
  47.  
  48. 	if (m_Y_zmiana >(m_Y+220)){
  49. 		licznik++;
  50. 		var podstaw =licznik +  "0 0 0";
  51. //		alert(m_Y_zmiana);
  52. 		obrazek.style.margin = podstaw;
  53. 	}
  54.  
  55.         }
  56.  
  57. </script>
  58. </head>
  59. <body>
  60. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  61.  
  62. <div id="nazwa" style="margin-left:200px;"><img src="images/1.gif" id="obrazek" /></div>
  63.  
  64. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  65. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  66. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  67.  
  68.  
  69.  
  70. </body>
  71. </html>
[HTML] pobierz, plaintext



Tam jest jeszcze dużo błędów - tylko tak mniej więcej pokazałem że to może działać.

PS - zdaje mi się że można to zrobić dużo łatwiej!
PS2 - jest tam taka wartość 220 - ją trzeba zmienić w zależności od przeglądarki
PS3 - na IE nie testowałem
emitra
12.10.2007, 08:15:28
żeby takie coś działo w takiej formie trzeba powolutku przewijac okno. bo małe szarpniecie naprawdę malutkie i już obrazek nie nadąża.
Poza Ty oparte to jest o miejsce zlapania za scrola i wystaczy ze zlapie sie za wysoko to nie zjezdza w innej odleglosci od ogry niz gdy zalapiemy w sordku. Jak zlapiemy na dole to w ogole zjezdza juz gdy wciaz jest widoczny smile.gif

Ale dziękuję za odpowiedź.
Może ktoś jeszcze jakiś pomysł.

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script>
  4.  
  5. var pozycjaStartowaY = 269;
  6.  
  7. onload = function(){
  8. 	window.onscroll = sprawdzaj;
  9. }
  10.  
  11. function sprawdzaj()
  12. {
  13. 	var obrazek = document.getElementById("obrazek");
  14.  
  15. 	//jezeli jestesmy wyzej to porpawnei umiejscawiamy obrazek nastartowej bo czasem potrafi dosjc do rozbierznosci
  16. 	if ( document.body.scrollTop < pozycjaStartowaY )
  17. 		obrazek.style.top = pozycjaStartowaY;
  18. 	else
  19. 		obrazek.style.top = document.body.scrollTop ; 
  20.  
  21. }
  22. </script>
  23.  
  24. </head>
  25. <body>
  26. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  27.  
  28. <div id="nazwa" style="margin-left:200px; border:1px solid red; height: 500px;">
  29. <img src="images/address-book.png" id="obrazek" style='position: absolute; top: 269;' /></div>
  30.  
  31. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  32. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  33. <br /><br /><br /><br /><br /><br /><br />
  34.  
  35.  
  36. </body>
  37. </HTML>
[HTML] pobierz, plaintext



Takie coś spłodziłem. Tylko że tak naprawde nie do konca to dziala bo ten Div z czerowna ramka ma byc obszarem w ktorym sie porusza obrazem a ok on wyzej nie poleci ale z dolu wychodzi i teraz czy jest mozliwosc sprawdzenia dolnej granicy Diva. pozycji border-bottom smile.gifquestionmark.gif?
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.