• 145.5k
• 22
• 190
• 478

How can i further make this jquery jQuery scroll-prevention plugin better?

• 41
• 2

This plugin is for article pages that has a very long main content (left side) and a shorter sidebar. When the user scrolls down mostly the right part will be white space.

What this plugin does is make the sidebar stick or make it fixed past a point and will stop sticking when it collides with the bottom part or a footer. The functionality will not work if the main content is short.

Any way i'm asking feedback on how to further improve my JS Code, any feedback is appreciated. Thanks.

;(function ( ,ドル window, document, undefined ) {
// Create the defaults once
var pluginName = "scrollMinUntil",
defaults = {
 article: null,
 topPadding: 0
};
// The actual plugin constructor
var Plugin = function ( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function() {
 if($(this.element).length <= 0)
 return null;
 this.scroll(this.element, this.options); 
},
scroll: function(el, options) {
 var article = options.article,
 topPadding = options.topPadding,
 w = $(window),
 wrap = $(el).children('.wrap'),
 startingPos = wrap.offset().top,
 fixedPosTrigger = wrap.offset().top + wrap.outerHeight(),
 stopMovingPosTrigger = 0,
 staticMarginTop = 0,
 scrollTop = 0,
 elHeight = 0,
 stopMovingPos = 0,
 fixed = false,
 staticFlag = false;
 if(options.article.outerHeight() > 1500) {
 w.scroll(function() {
 // Calculate dynamic values
 scrollTop = $(this).scrollTop(),
 elHeight = wrap.outerHeight(),
 fixed = wrap.hasClass('fixed'),
 staticFlag = wrap.hasClass('static'),
 stopMovingPos = article.outerHeight() + article.offset().top;
 // Check if scrolling before or after the fixed trigger, set stopMovingPosTrigger accordingly
 (scrollTop < fixedPosTrigger) ? stopMovingPosTrigger = scrollTop : stopMovingPosTrigger = scrollTop + elHeight;
 // Making sure that fixed is triggered when scrolling pass the trigger position from the original area
 if(scrollTop > fixedPosTrigger && !staticFlag)
 wrap
 .addClass('fixed')
 .css({
 'padding-top': topPadding + 'px'
 });
 // Fixed positioned area, setting paddings and margins, and transition scrolling from the static area
 if((scrollTop > fixedPosTrigger) && (stopMovingPosTrigger < stopMovingPos)){
 wrap
 .removeClass('static')
 .addClass('fixed')
 .css({
 'margin-top': 0
 });
 }
 // Static positioned area, setting dynamically the margin-top for the element
 else if((stopMovingPosTrigger > stopMovingPos) && fixed) {
 // Calculate top margin to be added to the static element
 staticMarginTop = (stopMovingPos - startingPos) - elHeight;
 wrap
 .removeClass('fixed')
 .addClass('static')
 .css({
 'margin-top': staticMarginTop
 });
 }
 // Original area before the fixed position area
 else if(scrollTop < fixedPosTrigger) {
 wrap
 .removeClass('fixed static')
 .css({
 'padding-top': 0
 });
 }
 });
 }
}
};
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
return this.each(function () {
 if (!$.data(this, "plugin_" + pluginName)) {
 $.data(this, "plugin_" + pluginName,
 new Plugin( this, options ));
 }
});
};
})( jQuery, window, document );