Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Odczyt pozycji scrollTop po załadowaniu strony
Forum PHP.pl > Forum > Przedszkole
swist666
28.01.2014, 09:35:56
Robię skrypt w którym chcę aby menu zostawało fixed po scrollowaniu w dół z animacją pomniejszającą container. Wszystko działa ok jednak jak odświerzę przewiniętą stronę (już na starcie jest niżej) to odbywa się cała animacja. A chciałbym aby menu pokazywało się od razu zeskalowane.

Próbowałem na początek wrzucić coś takiego ale nie pomaga:

[JAVASCRIPT] pobierz, plaintext 
  1. $(function(){
  2.  
  3. if($(window).scrollTop() > 59){
  4. // funkcje zmieniające parametry css z normalnych na te pomniejszone bez animacji
  5. }
  6.  
  7. });
[JAVASCRIPT] pobierz, plaintext


Oto cały kod:

[JAVASCRIPT] pobierz, plaintext 
  1. var animate = true;
  2.   $(window).scroll(function(e){
  3.     var pos = $(window).scrollTop()
  4.     var h = 59 + $('#kmp_cookies').outerHeight();
  5.     if(pos > h){
  6.       $("#sticky_header").addClass("fixed");
  7.       if(animate){
  8.         // funkcje zmieniające parametry css z normalnych na te pomniejszone z .animate
  9.       }
  10.       animate = false;
  11.     }else{
  12.       if(!animate){
  13.         $("#sticky_header").removeClass("fixed");
  14.         // funkcje zmieniające parametry css z pomniejszonych na domyślne z .animate
  15.       }
  16.       animate = true;
  17.     }
  18. });
[JAVASCRIPT] pobierz, plaintext
markuz
28.01.2014, 09:49:30
Kod
$(document).ready(function() {

    var _top = $(window).scrollTop();

    if(_top > 59)
    {
        console.log('_top > 59');
    }

});


Takie coś śmiga?
swist666
28.01.2014, 09:53:31
nie.. konsola pusta. Nawet skasowałem resztę kodu i zostawiłem tylko to co wysłałeś i nadal pusto
markuz
28.01.2014, 10:00:52
Kod
$(document).ready(function() {

    var _top = $(window).scrollTop();
    console.log(_top);

});


A teraz coś się wyświetla?
skowron-line
28.01.2014, 10:08:06 
[JAVASCRIPT] pobierz, plaintext 
  1. $(window).on({
  2. 	scroll: function() {
  3. 		// przy scrolowaniu
  4. 	},
  5. 	load: function() {
  6. 		// po załadowaniu strony
  7. 	}
  8. })
[JAVASCRIPT] pobierz, plaintext

@markuz proponuje temat $(document).ready vs $(window)load
swist666
28.01.2014, 11:05:39
Cytat(skowron-line @ 28.01.2014, 10:08:06 ) *
[JAVASCRIPT] pobierz, plaintext 
  1. $(window).on({
  2. 	scroll: function() {
  3. 		// przy scrolowaniu
  4. 	},
  5. 	load: function() {
  6. 		// po załadowaniu strony
  7. 	}
  8. })
[JAVASCRIPT] pobierz, plaintext


Dalej nie wiem co zrobić aby uzyskać wartość o jaką przewinie przeglądarka stronę, bo za każdym razem jak odświeżę stronę to po document.ready wartość scrollTop = 0 a dopiero potem następuje przewinięcie strony w dół - sprawdzałem w chrome i safari. Jak uzyskać tą docelową wartość przewinięcia

ok znalazłem

[JAVASCRIPT] pobierz, plaintext 
  1. setTimeout(function(){
  2. 	if($(window).scrollTop() > 59){
  3. 		// kod
  4. 	}
  5. },10);
[JAVASCRIPT] pobierz, plaintext


Aby działało dla chrome i safari trzeba to tak chyba obejść.. Nie wygląda to profesjonalnie ale ja nie znalazłem innego sposobu.
markuz
28.01.2014, 11:11:53 
[JAVASCRIPT] pobierz, plaintext 
  1. $(window).on({
  2. 	scroll: function() {
  3. 		console.log($(window).scrollTop());
  4. 	},
  5. 	load: function() {
  6. 		console.log($(window).scrollTop());
  7. 	}
  8. })
[JAVASCRIPT] 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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.