I tried to make the header sticky using the default jquery code:
$('.page-header').mage('sticky', {
container: '.page-wrapper'
});
I added this piece of code into the theme.js
file in the web/js
directory.
It doesn't work, how to fix that?
Here the complete theme.js
code:
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'mage/smart-keyboard-handler',
'mage/mage',
'mage/ie-class-fixer',
'domReady!'
], function ($, keyboardHandler) {
'use strict';
if ($('body').hasClass('checkout-cart-index')) {
if ($('#co-shipping-method-form .fieldset.rates').length > 0 && $('#co-shipping-method-form .fieldset.rates :checked').length === 0) {
$('#block-shipping').on('collapsiblecreate', function () {
$('#block-shipping').collapsible('forceActivate');
});
}
}
$('.cart-summary').mage('sticky', {
container: '#maincontent'
});
$('.page-header').mage('sticky', {
container: '.page-wrapper'
});
$('.panel.header > .header.links').clone().appendTo('#store\\.links');
keyboardHandler.apply();
});
UPDATE
I created a sticky.js
file inside web/js
directory and put the following code:
require([
'jquery',
'mage/mage',
'domReady!'
], function ($) {
$('.page-header').mage('sticky', {
container: '.page-wrapper',
spacingTop: 0
});
});
I loaded this file in the default.xml:
<head>
<link src="js/sticky.js"/>
</head>
It doesn't work.