Element '#first' is visible on Screen!
Handled using callbackOnTrue and callbackOnFalse
Element '#second' is visible on Screen!
Handled using callbackOnTrue and callbackOnFalse
Element '#third' is visible on Screen!
Handled using callbackOnScroll

jQuery onScrollPosition DEMO

This is a demo-page for onScrollPosition jQuery Plugin
See below the demo gray elements the code used on this example.

element: #first
element: #second
element: #third
element: #spacer
This element is only a spacer and is nedeed only to scroll #third element out the viewport.
Continue to scroll down to see example code.

JAVASCRIPT CODE

$(function() {
    
    
    // FIRST element
    // ===================================
    
    $("#first").onScrollPosition({
        activeOnStart: false, // prevent callbacks execution before window scroll
        callbackOnTrue: function(data) {
            if (! $('#topMessageBar').hasClass('active')) {
                $('#topMessageBar').addClass('active');
            }
            if (data.scrollTop === 0) {
                $('#topMessageBar').removeClass('active');
            }
        },
        callbackOnFalse: function() {
            if ($('#topMessageBar').hasClass('active')) {
                $('#topMessageBar').removeClass('active');
            }
        }
    });
    
    
    // SECOND element
    // ===================================
    
    $("#second").onScrollPosition({
        callbackOnTrue: function() {
            if (! $('#middleMessageBar').hasClass('active')) {
                $('#middleMessageBar').addClass('active');
            }
        },
        callbackOnFalse: function() {
            if ($('#middleMessageBar').hasClass('active')) {
                $('#middleMessageBar').removeClass('active');
            }
        }
    });
    
    
    // THIRD element
    // ===================================
    
    $("#third").onScrollPosition({
        callbackOnScroll: function(data) {
            if( data.isOnScreen === true ) {
                if (! $('#bottomMessageBar').hasClass('active')) {
                    $('#bottomMessageBar').addClass('active');
                }
            }else{
                if ($('#bottomMessageBar').hasClass('active')) {
                    $('#bottomMessageBar').removeClass('active');
                }
            }

        }
    });

});