All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.Sticky class

Ink.UI.Sticky makes an element "stick" to the screen and stay in the same place as the user scrolls. To use it, just select an element as you create the Sticky. As you scroll past it, it will stick to the top of the screen. The activateInLayouts option controls in what layouts this behaviour happens. By default, it is disabled for the small and tiny layouts. Pass a comma-separated string to choose just the layouts you need. You can use the offsetTop option if you want it to keep some distance from the top of the screen. To avoid it going under the footer of your page, pass a selector to your footer as the bottomElement option.

Methods
Method name	Description
new Sticky(selector, [options])	Constructor

new Ink.UI.Sticky(selector, [options])

Accepts

selector
Element or selector
options
Options Options object.
options.offsetBottom
Number of pixels of distance from the bottomElement. Defaults to 0.
options.offsetTop
Number of pixels of distance from the topElement. Defaults to 0.
options.inlineDimensions
Set to false to disable setting inline CSS dimensions. Use this if you want to use CSS to define your own dimensions. Defaults to true.
options.inlinePosition
Set to false to disable setting inline CSS positions. Use this if you want to use CSS to define your own positioning. Defaults to true.
options.wrapperClass
CSS class for the wrapper element. Defaults to 'ink-sticky-wrapper'.
options.stickyClass
CSS class to stick the element to the screen. Defaults to 'ink-sticky-stuck'.
options.topElement
CSS Selector that specifies a top element with which the component could collide.
options.bottomElement
CSS Selector that specifies a bottom element with which the component could collide.
options.activateInLayouts
Layouts in which the sticky behaviour is present. Pass an array or comma-separated string. Defaults to null, meaning it's enabled in every layout.

Basic usage

Scroll down and see the sticky element stick to the top of your screen.

Demo

Duct Tape

Duct tape or duck tape is cloth- or scrim-backed pressure-sensitive tape often coated with polyethylene. There are a variety of constructions using different backings and adhesives. One variation is gaffer tape designed to be cleanly removed, while duct tape is not. Another variation is heat-resistant duct tape useful for sealing heating/ventilation/air-conditioning (HVAC) ducts, produced because standard duct tape fails quickly when used on heating ducts. Duct tape is generally gray or black but also available in other colors.

During World War II, Revolite, then a division of Johnson & Johnson, developed an adhesive tape made from a rubber-based adhesive applied to a durable duck cloth backing. This tape resisted water and was used as sealing tape on ammunition cases during World War II.

I am a bottom element

Code

<div>
    <nav id="my-sticky"
        class="ink-navigation ink-sticky bottom-space"
        data-bottom-element="#bottom-element"
        data-offset-top="60">
        <ul class="menu horizontal black">
            <li class="heading"><a hred="">I am a sticky navigation</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contacts</a></li>
        </ul>
    </nav>
    <h2>Duct Tape</h2>
    <p>
        Duct tape or duck tape is cloth- or scrim-backed pressure-sensitive tape often coated with polyethylene. There are a variety of constructions using different backings and adhesives. One variation is gaffer tape designed to be cleanly removed, while duct tape is not. Another variation is heat-resistant duct tape useful for sealing heating/ventilation/air-conditioning (HVAC) ducts, produced because standard duct tape fails quickly when used on heating ducts. Duct tape is generally gray or black but also available in other colors.
    </p>

    <p>
        During World War II, Revolite, then a division of Johnson & Johnson, developed an adhesive tape made from a rubber-based adhesive applied to a durable duck cloth backing. This tape resisted water and was used as sealing tape on ammunition cases during World War II.
    </p>
    <p id="bottom-element"><span class="ink-label black">I am a bottom element</span></p>
</div>

<script>
    // Not required when using autoload.js
    Ink.requireModules( ['Ink.UI.Sticky_1'], function( Sticky ){
        new Sticky('#my-sticky')
    });
</script>