Hinzufügen von Klasse zu einzelnen Elementen, wenn im Ansichtsfenster

Question

Ich habe derzeit ein Skript eingerichtet, um eine Klasse zu einem Div hinzuzufügen, sobald es im Ansichtsfenster ist. Ich habe mehrere divs, für die das gilt, aber sobald die erste sichtbar ist, wird die Klasse zu jedem einzelnen hinzugefügt. Gibt es eine rationellere Art, diese zu trennen, anstatt die Funktion für jedes Element zu duplizieren?

HTML

<div class="header-title"><span>FOO</span></div> 

<div class="header-title"><span>BAR</span></div> 

CSS

.header-title span { 
    display: inline-block; 
    position: relative; 
} 

.change:after { 
    content: " "; 
    position: absolute; 
    height: 5px; 
    border-bottom: 1px solid red; 
    -webkit-animation: extend .75s 1 forwards; 
    animation: extend 4s 1 forwards; 
    margin-left: 4px; 
    top: 1.2em !important; 
} 


@-webkit-keyframes extend { 
    0% { 
    width: 0; 
    } 
    100% { 
    width: 200px; 
    } 
} 
@keyframes extend { 
    0% { 
    width: 0; 
    } 
    100% { 
    width: 200px; 
    } 
} 

jQuery

function isElementInViewport(elem) { 
    var $elem = jQuery(elem); 

    // Get the scroll position of the page. 
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); 
    var viewportTop = jQuery(scrollElem).scrollTop(); 
    var viewportBottom = viewportTop + jQuery(window).height(); 

    // Get the position of the element on the page. 
    var elemTop = Math.round($elem.offset().top) ; 
    var elemBottom = elemTop + $elem.height(); 

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop)); 
} 

// Check if it's time to start the animation. 
function extendLine() { 
    var $elem = jQuery('.header-title span'); 

    // If the animation has already been started 
    if ($elem.hasClass('change')) return; 

    if (isElementInViewport($elem)) { 
     // Start the animation 
     $elem.addClass('change'); 
    } 
} 

// Capture scroll events 
jQuery(window).scroll(function(){ 
    extendLine(); 
}); 

http://codepen.io/SeanLindsay1/pen/bBOWLW

Answer 1

Sie die Funktion für alle Instanzen vonläuft. Stattdessen tun jeweils einzeln:

function extendLine() { 
    jQuery('.header-title span').each(function() { 
     var $elem = this; 
     ... 
    }); 
} 

Demo