A simple javascript module for adding a class to an element depending if it is visible or not.

scrollchange.js

// Use it like this:
// ScrollChange.init('.featured-on', 'featured-on--fixed');

var ScrollChange = {
    element: '',
    windowHeight: '',
    elementTop: '',
    lastScrollTop: 0,
    delta: 50,
    didScroll: false,

    /**
     * Set up some variables, add a class if necessary, then listen for scrolls on a timer.
     *
     * @param  {string} selector         A selector string, including the . or #
     * @param  {string} selectorModifier A classname modifying the selector. No period.
     * @return undefined                 undefined
     */
    init: function(selector, selectorModifier) {

        // Set some variables
        this.selector = selector
        this.selectorModifier = selectorModifier;
        this.element = document.querySelector(this.selector);
        this.windowHeight = window.innerHeight;
        this.elementTop = this.element.offsetTop;
        this.viewportBottom = document.body.scrollTop + window.innerHeight;

        // On init, check if the element needs to be fixed position.
        (this.viewportBottom <= this.elementTop) ? this.element.classList.add(this.selectorModifier) : '';

        // Start listening for scrolls.
        window.addEventListener('scroll', function(e) {
            ScrollChange.didScroll = true;
        });

        // Throttle the scroll event actions.
        setInterval(function() {

            if(ScrollChange.didScroll === true) {
                ScrollChange.hasScrolled();
                ScrollChange.didScroll = false;
            }
        }, 250);

    },

    /**
     * When the scroll event fires, add or remove a class.
     * @param  {Object}  e The scroll event.
     * @return undefined   undefined
     */
    hasScrolled: function(e) {

        var self = this;

        // scroll position of the document
        var st = document.body.scrollTop || document.documentElement.scrollTop;

        // If the scroll position is not that different from last time,
        // don't do anything
        if(Math.abs(self.lastScrollTop - st) <= self.delta) return;

        // Get the bottom of the viewport.
        self.viewportBottom = st + window.innerHeight;

        // If the element is not visibile in the viewport, add a class.
        if (self.viewportBottom < self.elementTop) {

            self.element.classList.add(self.selectorModifier);

        } else if ( self.viewportBottom >= self.elementTop && self.element.classList.contains(self.selectorModifier) ){
          // If the element would already have been scrolled past, remove a class
            self.element.classList.remove(self.selectorModifier);
        }

        // Remember the last scroll position.
        self.lastScrollTop = st;
    }
};