SwissUpLabs Logo

Argento sticky

Available since Argento 0.9.5

ArgentoSticky - is a script that allows you easily transform any custom content into sticky element, that will be sticked to the top of the screen, when scrolling out of the viewport.

Contents

Typical markup for sticky element

<div data-mage-init='{"argentoSticky": {}}'>
    Block content
</div>

data-mage-init='{"argentoSticky": {}}' - is a standard way to run javascript widget written according to magento guides.

Options

Option Example Description
media (min-width: 768px) and (min-height: 600px) Media rules to check before activate the sticky
parent .page-wrapper Sticky element will stay inside this element (Parent node by default)
offset_top 20 Offsets the initial sticking position by of number of pixels

View other options at official sticky-kit site.

Usage examples

Html

<div class="some-class-name" data-mage-init='{"argentoSticky": {
    "media": "(min-width: 768px) and (min-height: 600px)",
    "parent": ".page-wrapper",
    "offset_top": 45
}}'>
    Block content
</div>

Javascript

View docs about how to add custom js to argento theme.

define([
    'jquery',
    'argentoSticky',
    'domReady!'
], function($) {
    $('.some-class-name').argentoSticky({
        media: '(min-width: 768px) and (min-height: 600px)',
        parent: $('.page-wrapper'),
        offset_top: 45
    });
});

Enable/disable sticky element programmatically

This feature is available since 0.9.7 version only

Create custom theme and add argento-custom.js file there. Paste next code there:

The code below shows how to disable sticky header in ArgentoFlat theme:

define([
    'jquery',
    'argentoSticky',
    'domReady!'
], function($) {
    // disable
    if($ ('.header.wrapper').length){
        $('.header.wrapper').data('argentoArgentoSticky').disable();
    }

    // or enable
    // if($ ('.header.wrapper').length){
    //     $(".header.wrapper").data('argentoArgentoSticky').enable();
    // }
});
Next up
Edit this Page