jQuery Scroll-Funktion Feuer sobald Element sichtbar wird

Question

Hallo Leute Ich benutze die Scroll-Funktion in diesem Skript, aber es wird jedes Mal ausgelöst, wenn ein Benutzer scrollt. Ich möchte, dass es nur einmal auslöst, wenn der Benutzer nach #ror scrollt. Ich habe versucht, mit der fired Variable zu überprüfen, ob es bereits gefeuert wurde, aber das schien nicht zu funktionieren. Ich weiß, dass einige Leute diese Frage schon beantwortet haben, aber hier habe ich die gefeuerte Lösung und kann sie nur einmal benutzen. Jeder denkt, dass sie bitte helfen können?

$(window ).scroll(function() { 
var fired = 0; 
    console.log(fired); 
    if(fired == 0){ 
    $('#ror').html(''); 
    $('#ror').goalProgress({ 
    goalAmount: 100, 
    currentAmount: 75, 
    textBefore: 'progress bar', 
    textAfter: '', 
    offset: 10, 
    }); 
    fired=1; 
    } 
}); 

Answer 1

Sie müssen die gefeuerte Variable außerhalb der Bildlauffunktion verschieben. Während Sie es jetzt tun, initialisieren Sie die Variable fired neu und setzen sie jedesmal auf 0, wenn das Bildlaufereignis ausgelöst wird.

var fired = 0; 
$(window).scroll(function() { 
    console.log(fired); 
    if(fired == 0){ 
    $('#ror').html(''); 
    $('#ror').goalProgress({ 
    goalAmount: 100, 
    currentAmount: 75, 
    textBefore: 'progress bar', 
    textAfter: '', 
    offset: 10, 
    }); 
    fired=1; 
    } 
}); 

Answer 2

erkennen, wenn eine gegebene #target blättert in Sicht, können Sie Top-Position buchen, es ist, und prüfen Sie, ob diese Position bereits in der Ansichtsfenster.

$('#target').offset().top - $(window).outerHeight() > $(window).scrollTop(); 

dass ein Teil der Gleichung links konstant ist (solange man etwas nicht bewegen oder die Größe des Bildfensters ändern). Daher kann es sinnvoll sein, das außerhalb Ihrer Event-Handler-Funktion zu verschieben. Sie müssen daran denken, dass das Scroll-Ereignis ziemlich teuer ist, da es beim Scrollen ständig ausgelöst wird und der Browser bereits ziemlich mit dem Rendern des Darstellungsbereichs beschäftigt ist.

Wenn die Arbeit erledigt ist, können Sie den Event-Handler entfernen.

$(window).off(event); 

So Ihre endgültige Code würde wie folgt aussehen:

var triggerAtY = $('#target').offset().top - $(window).outerHeight(); 

$(window).scroll(function(event) { 
    // #target not yet in view 
    if (triggerAtY > $(window).scrollTop()) { 
    return; 
    } 

    // run your task 

    // remove this event handler 
    $(this).off(event); 
}); 

Werfen Sie einen Blick auf die Demo: https://jsfiddle.net/6whnfa02/1/

Docs:

• http://api.jquery.com/offset/
• http://api.jquery.com/outerHeight/
• http://api.jquery.com/scrollTop/
• http://api.jquery.com/off/

Answer 3

$(window).scroll(function(event) { 
    var eT = $('#ror').offset().top, 
    wH = $(this).height(), 
    wSt = $(this).scrollTop(); 
    if(wSt > (eT-wH)) { 
     alert('you have scrolled to the ror!'); 
     //detach scroll event handler, as we dont want it to fire again 
     $(this).off(event); 
    } 
} 

Der obige Code überprüft, wenn der Benutzer auf ein Element nach unten gescrollt hat. Wenn ja, warnen Sie etwas und trennen Sie den Scroll-Ereignishandler für window. Sie können auf jquery documentation verweisen, um die Bedeutung von Offset, Höhe und scrollTop zu sehen. Jetzt

, als @Pevera Zeiger, ist es kostspielig Ereignishandler Fenster blättern zu befestigen, sollten Sie sich bewusst sein, dass. Wenn Sie innerhalb des Scroll-Callbacks eine umfangreiche Codeausführung ausführen, wird das Scrollen der Seite erschwert. Wenn Sie also einen Handler an das Fenster scrollen müssen, führen Sie den Rückruf-Code innerhalb eines Timeout-Callbacks aus. Es stellt sicher, dass der Scroll-Callback-Code nach einer bestimmten Verzögerung ausgeführt wird, was das Scrollen der Seite erleichtert. den obigen Code mit Timeout Umschreiben wird wie folgt aussehen:

var timeout = null; 
$(window).scroll(function (event) { 
    if (!timeout) { 
     // set a timeout to run after 250ms 
     timeout = setTimeout(function() { 
      clearTimeout(timeout); 
      timeout = null; 
      var eT = $('#ror').offset().top, 
      wH = $(this).height(), 
      wSt = $(this).scrollTop(); 
      if (wSt > (eT-wH)){ 
       alert('you have scrolled to the ror!'); 
       //detach scroll event handler, as we dont want it to fire again 
       $(this).off(event); 
      } 
     }, 250); 
    } 
}); 

Jedesmal Benutzer scrollt die Seite, ein Timeout eingestellt ist nach (mindestens) 250 ms ausgeführt wird.Im Timeout-Callback entfernen wir diesen Timeout-Handler und prüfen, ob der Benutzer zum Element gescrollt hat. Wenn ja, warnen wir etwas und trennen den Scroll-Handler für das Fenster, damit es nicht erneut ausgeführt wird.

Zum besseren Verständnis verweisen wir auf diese FIDDLE.

Weitere Informationen zu diesem stackoverflow post und John Resig blog post.