Checking Text on Background onscroll - Viewport Problem

Hello, if I scroll and the text leaves the viewport, the class on some images changes from "background--dark" to "background--light". If the text is completely in the viewport, everything is fine, but if it leaves (complete or not), the backgroundcheck doesn't seem to work right.

I took a look at your plugin, and on line 78 I saw, that you run "check()" everytime you scroll.

window.addEventListener(resizeEvent, throttle.bind(null, function () {
     resizeCanvas();
     check();
}));

window.addEventListener('scroll', throttle.bind(null, check)); //<-- THIS LINE

resizeCanvas();
check();

I fixed this for me, by deleting the line 78 and creating a directive, which does the same (checks by scrolling), but adds a class "gotFontColor" to the element, which just appeared in the viewport when I scrolled and runs "BackgroundCheck.refresh();". If I scroll back to the element, I ask if the element got the class "gotFontColor", and if so, I just do nothing, so the class doesn't change after I just got one.

Cannot explain this proper, so here the code:

CheckoutApp.directive('checkViewport', function() {
    'use strict';
    // checks if specified element is in Viewport
    function isInViewport(element) {
        var rect = element.getBoundingClientRect();
        var html = document.documentElement;
        return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || html.clientHeight) &&
        rect.right <= (window.innerWidth || html.clientWidth)
        );
    }
    function check(element) {
        // is Element in Viewport
        if(isInViewport(element)) {
            // if element has not class "gotFontColor"
            if(!element.classList.contains('gotFontColor')) {
                // give element class "gotFontColor"
                element.classList.add('gotFontColor');
                // run BackgroundCheck.refresh()
                BackgroundCheck.refresh();
            }
        }
    }
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            // Listens to scroll
            window.addEventListener('scroll', function() {
                // run check()
                check(element[0]);
            });
        }
    };
});

I would like to ask if it is possible to add something like this to your code, so the script doesn't check the same elements every time I scroll. Would be perfect, so I could use your code without removing it from the "bower_components". Better to use "official code" than my own "hacked version", if you know what I mean?

kennethcachia / background-check

Checking Text on Background onscroll - Viewport Problem #57