[JavaScript] jQuery - określona akcja działa po przewinięciu strony Opcje

[bahh]

Witam wszystkich,

borykam się z pewnym problemem, otóż - mam funkcję, która ma się wykonać po przewinięciu strony. To znaczy, jeśli scroll będzie na wysokości 500 pikseli od samej góry strony, to uruchomi to (ważne, uruchomi to TYLKO RAZ!)

[HTML] pobierz, plaintext 
jQuery({someValue: 0}).animate({someValue: 20}, {
        duration: 2000,
        easing:'swing',
        step: function() { 
      	 $('#c1').text(Math.ceil(this.someValue));
        }
});
[HTML] pobierz, plaintext 

w jaki sposób to zrobić? Korzystałem z $(window).scrollTop() jako if (tzn var scroll1 = $(window).scrollTop() i dalej if (scroll1>500) ale za każdym razem, gdy przewinąłem stronę i wróciłem w górę to animacja odpalała się ponownie - czego rzecz jasna nie chcę. Ma ktoś pomysł, jak zrobić to tak, by dana akcja uruchomiła się tylko jeden raz po przewinięciu strony do danej wartości?

[Turson]

Zdefiniuj jakąś zmienną przykładowo
var animacja = true;
przed wykonaniem animacji sprawdz czy animacja == true, jesli tak to ją wykonaj i ustaw na false

[bahh]

Niestety nie działa, mój kod:

[HTML] pobierz, plaintext 
<script>
$(document).ready(function(){
  var scrolled = $(window).scrollTop();
  var animation1 = true; 
  if (scrolled>100)
  {
      if (animation1 == true)
      {
      jQuery({someValue: 0}).animate({someValue: 20}, {
        duration: 2000,
        easing:'swing',
        step: function() { 
      	 $('#c1').text(Math.ceil(this.someValue));
        }
      });
      animation1 = false;
     }       
  }  
});
</script>
[HTML] pobierz, plaintext 

Ten post edytował bahh 24.12.2014, 11:08:21

[viking]

Scrolled jest tu pobierane raz po załadowaniu. Ty potrzebujesz przypiąć zdarzenie $(window).on('scroll') i w nim sprawdzać pozycję.

[bahh]

gdy zmieniam
var scrolled = $(window).scrollTop();
na
var scrolled = $(window).on('scroll');

to nic to nie daje, jak to poprawnie wykonać?

[viking]

[PHP] pobierz, plaintext 
$(function() {
  $(window).on('scroll', function(){
    var scrolled = $(this).scrollTop();
...
  });
});
 
[PHP] pobierz, plaintext 

[tzm]

[PHP] pobierz, plaintext 
$(function() {
  var oneTimeEvent = false;
  $(window).on('scroll', function(){
    var scrolled = $(this).scrollTop();
    If ( scrolled == 500 && oneTimeEvent == false){
         oneTimeEvent = true;
        //tutaj kod
       }
...
  });
});
 
[PHP] pobierz, plaintext 

Ten post edytował tzm 24.12.2014, 19:24:26

[bahh]

niestety nie śmiga to, po prostu jQuery przestaje działać

[Turson]

Sprawdź konsolę

[bahh]

Panowie, nie znam się dobrze na jQuery liczę na wyrozumiałość, zwłaszcza, że funkcje, które tutaj podajecie są dla mnie niezrozumiałe. Dodatkowo dla informacji wrzucam powyższy kod do $(document).ready(function(){ ... });

[maviozo]

Liczysz na gotowca, a nie wyrozumiałość
Zacząłbym od edycji tej linijki:

Kod

If ( scrolled == 500 && oneTimeEvent == false){

Ponieważ przewijasz stronę partiami, zapewne przeskakujesz wartość 500. Ustaw na "większe lub równe " wtedy zarówno 500, jak i 510 i 520 uruchomi zdarzenie.

Kod

If ( scrolled >= 500 && oneTimeEvent == false){

Poza tym, jeśli nie masz pewności, czy funkcja działa, po

Kod

$(window).on('scroll', function(){
var scrolled = $(this).scrollTop();

Dodaj sobie np. console.log(scrolled) to będziesz wiedział, jak ta wartość się zmienia w zależności od pozycji strony.

[tzm]

Nie jestem pewien co zwraca scrollTop. Najwyżej dopisz parseInt().

[bahh]

scrollTop zwraca wartość numeryczną - pozycję od danego elementu. W naszym przypadku wysokość okna. Samo działanie funkcji mogę testować ale ta funkcja ma błąd już w strukturze. Błąd typu jak w PHP brak średnika itp. Nie mogę testować, bo po wklejeniu powyższego kodu cały jQuery nie działa. Nie wiem gdzie jest błąd w tamtejszej składni

http://jsfiddle.net/41wwyxsz/

nikt nie pomoże?

[trueblue]

.body a nie body?
If zamiast if?

Zmień == na >=

Ten post edytował trueblue 29.12.2014, 22:37:53

[bahh]

mam i rozwiązanie w pełni działające, jak ktoś potrzebuje niech korzysta:

[HTML] pobierz, plaintext 
<script>
var animation1 = true; 
 
$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      if (animation1 == true)
      {
       //tutaj dajemy okreslone zadania po scrollu
       jQuery({someValue: 0}).animate({someValue: 20}, {
        duration: 2000,
        easing:'swing',
        step: function() { 
      	 $('#c1').text(Math.ceil(this.someValue));
        }
      });
      //tutaj koniec dodawania zadan
      animation1 = false;
      } 
    }
}); 
</script>
[HTML] pobierz, plaintext 

[com]

http://jsfiddle.net/41wwyxsz/1/