Sticky

Sticky makes it easy to affix menus or any other elements to the top of the page whenever a user scrolls the page down. This could be very helpful and useful on long pages. Sticky is disabled on mobile devices to avoid unwanted content overlaps and to preserve valuable screen real estate.

Usage #

Just set data-kube="sticky" to an element, and now when you scroll down this element will be fixed at the top of the page.

<div data-kube="sticky">...</div>

Please, scroll down and see how to fix the navigation with Sticky.

<div data-kube="sticky" class="is-navbar-box">
    <div class="is-brand">
        <b>Brand</b>
    </div>
    <div class="is-navbar">
        <nav>
            <ul>
                <li><a href="#">...</a></li>
            </ul>
        </nav>
    </div>
</div>

Settings #

offset

Type: Number

Default: 0

Sets top offset in pixels when the element is fixed.

// set 30 pixels offset from the top
<div data-kube="sticky" data-offset="30">...</div>

Events #

Event Description
fixed This event fires immediately when the element becoming fixed at the top of the page.
unfixed This event is fired whenever fixed position of the element is released.

Catch events in your module:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            sticky: {
                fixed: function(sender)
                {
                    console.log('Element is fixed.');
                }
            }
        }
    });
})(Kube);

Catch events from a specific sticky

Set an ID for the sticky:

<div id="box" data-kube="sticky">...</div>

Or set data-name attribute:

<div data-name="box" data-kube="sticky">...</div>

Catch events in your module by the specified ID or data-name:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            sticky: {
                unfixed: function(sender)
                {
                    if (sender._id === 'box')
                    {
                        console.log('The box is unfixed.');
                    }
                }
            }
        }
    });
})(Kube);