Visibility

This addon helps detect the visibility of the element on the scroll. If the element becomes visible on the page, the event visible starts.

Usage #

Please scroll down to reach the element.









































I'm visible
<div data-kube="visibility">...</div>

Events #

Event Description
visible This event is triggered when the element appears on the screen when you scroll.
invisible This event fires when the item is not visible on the screen when you scroll.

Catch events in your module:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            visibility: {
                visible: function(sender, $element)
                {
                    console.log('I am visible.');
                },
                invisible: function(sender, $element)
                {
                    console.log('I am invisible.');
                }
            }
        }
    });
})(Kube);

How to catch events from the element with a specified name.

Set an ID:

<div id="trackme" data-kube="visibility">...</div>

Or set data-name attribute:

<div data-name="trackme" data-kube="visibility">...</div>

Catch event.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            visibility: {
                visible: function(sender, $element)
                {
                    if (sender._id === 'trackme')
                    {
                        console.log('I am visible.');
                    }
                },
                invisible: function(sender, $element)
                {
                    if (sender._id === 'trackme')
                    {
                        console.log('I am invisible.');
                    }
                }
            }
        }
    });
})(Kube);