3

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.

Improve this question
0

Try putting it inside the document.ready() function 

define([
    'jquery',
    'mage/smart-keyboard-handler',
    'mage/mage',
    'mage/ie-class-fixer',
    'domReady!'
], function ($, keyboardHandler) {
    'use strict';
    $(document).ready(function(){
    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();
    });
});
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.