Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Shopware jQuery sticky element
/**
* Sticky plugin to add a class based on the
* scroll position.
*/
$.plugin('swStickyElement', {
defaults: {
/**
* The css class for the sticky element.
*
* @property stickyCls
* @type {String}
*/
stickyCls: 'is--sticky',
/**
* The element which applies to the exceptCls class
*
* @property exceptElement
* @type {String}
*/
exceptElement: 'body',
/**
* The css classes of the exceptElement
* to disable the sticky function
*
* @property exceptClasses
* @type {String}
*/
exceptClasses: '.is--ctl-checkout, .is--target-checkout',
/**
* The scroll position
*
* @property 300
* @type {Integer}
*/
scrollTop: 96
},
/**
* Initializes the plugin
*
* @public
* @method init
*/
init: function() {
var me = this;
me.applyDataAttributes();
me.sticky();
},
/**
* Add's the css class based on the given scroll position
*
* @public
* @method sticky
* @returns {jQuery}
*/
sticky: function() {
var me = this;
if (!$(me.opts.exceptElement).is(me.opts.exceptClasses)) {
$(window).scroll(function() {
if ($(window).scrollTop() >= me.opts.scrollTop) {
$(me.$el).addClass(me.opts.stickyCls);
} else {
$(me.$el).removeClass(me.opts.stickyCls);
}
});
}
},
/**
* Destroys the plugin and all necessary settings.
*
* @public
* @method destroy
*/
destroy: function() {
var me = this;
$(me.$el).removeClass(me.opts.stickyCls);
me._destroy();
}
});
/**
* Register the Plugin to the Statemanager
*/
StateManager.addPlugin('*[data-sticky-element="true"]', 'swStickyElement');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.