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);