Skip to content

Commit

Permalink
Allow elements to stick at different sreen widths
Browse files Browse the repository at this point in the history
Builds on top of garand#33. 

The property `minWidthToStick` (called `responsiveBreakpoint` in garand#33) can be set for each element to override the default value.
  • Loading branch information
paumoreno committed Apr 25, 2014
1 parent 4e88e2a commit acab81a
Showing 1 changed file with 22 additions and 43 deletions.
65 changes: 22 additions & 43 deletions jquery.sticky.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
// Sticky Plugin v1.0.0 for jQuery
// Sticky Plugin
// =============
// Author: Anthony Garand
//
// https://github.com/garand/sticky/pull/33
//
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
// Improvements by Leonardo C. Daronco (daronco)
// Created: 2/14/2011
Expand All @@ -17,24 +20,33 @@
className: 'is-sticky',
wrapperClassName: 'sticky-wrapper',
center: false,
getWidthFrom: ''
getWidthFrom: '',
minWidthToStick: 640
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
placer();
},
resizer = function() {
windowHeight = $window.height();
placer();
},
placer = function () {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
extra = (scrollTop > dwh) ? dwh - scrollTop : 0,
o = $.extend(defaults);

for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;

if (scrollTop <= etse) {
if (scrollTop <= etse || $window.width() < s.minWidthToStick) {
if (s.currentTop !== null) {
s.stickyElement
.css('position', '')
Expand Down Expand Up @@ -66,17 +78,14 @@
}
}
},
resizer = function() {
windowHeight = $window.height();
},
methods = {
init: function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);

var stickyId = stickyElement.attr('id');
var wrapper = $('<div></div>')
stickyId = stickyElement.attr('id');
wrapper = $('<div></div>')
.attr('id', stickyId + '-sticky-wrapper')
.addClass(o.wrapperClassName);
stickyElement.wrapAll(wrapper);
Expand All @@ -90,39 +99,20 @@
}

var stickyWrapper = stickyElement.parent();
stickyWrapper.css('height', stickyElement.outerHeight());
// stickyWrapper.css('height', stickyElement.outerHeight());
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
className: o.className,
getWidthFrom: o.getWidthFrom
getWidthFrom: o.getWidthFrom,
minWidthToStick: o.minWidthToStick
});
});
},
update: scroller,
unstick: function(options) {
return this.each(function() {
var unstickyElement = $(this);

removeIdx = -1;
for (var i = 0; i < sticked.length; i++)
{
if (sticked[i].stickyElement.get(0) == unstickyElement.get(0))
{
removeIdx = i;
}
}
if(removeIdx != -1)
{
sticked.splice(removeIdx,1);
unstickyElement.unwrap();
unstickyElement.removeAttr('style');
}
});
}
update: scroller
};

// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
Expand All @@ -143,17 +133,6 @@
$.error('Method ' + method + ' does not exist on jQuery.sticky');
}
};

$.fn.unstick = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method ) {
return methods.unstick.apply( this, arguments );
} else {
$.error('Method ' + method + ' does not exist on jQuery.sticky');
}

};
$(function() {
setTimeout(scroller, 0);
});
Expand Down

0 comments on commit acab81a

Please sign in to comment.