Api and options

Different ways and options of running plugin are examined bellow.



            // As in example above run plugin with callback only
            $('.fadeInParagraph').whenInViewport(function($paragraph) {
                $paragraph.addClass('inViewport');
            });

            // With adjusted options
            $('.fadeInParagraph').whenInViewport(function($paragraph) {
                $paragraph.addClass('inViewport');
            }, {
                threshold: 100 // difference in pixels from user scroll position
            });

            // get instance
            var footerInViewport = $('footer').whenInViewport(function($footer) {
                $footer.addClass('inViewport');
            }).data('whenInViewport');

            // get instance via constructor
            var footerInViewport = new WhenInViewport($('.footer').get(0), function(footer) {
                $(footer).addClass('inViewport');
            });

            // stop whenInViewport listener
            footerInViewport.stopListening();

        

Plugin options / defaults are exposed in WhenInViewport.defaults namespace so you can easily adjust them globally. List of options is bellow.


            WhenInViewport.defaults = {
                threshold: 0, // difference in pixels from user scroll position
                context: null // callback context
            };
        

If you want to set delaying / rate-limiting engine for scroll and resize events (for example delegate to underscores throttle or debounce functions) a method for doing so is exposed:


            WhenInViewport.setRateLimiter(_.throttle, 250);
        

If you want to kill all whenInViewport listeners:


            WhenInViewport.destroy();
        

When page layout changes and no resize events are fired you might want to tell WhenInViewport to check all of its registered items:


            WhenInViewport.checkAll();
        

If you are running jQuery that is is not exposed on global window variable and want to use WhenInViewport via plugin facade:


            var $ = require('jquery');
            WhenInViewport.registerAsJqueryPlugin($);