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();
// }
});