diff --git a/README.md b/README.md
index 2535baa..5229078 100644
--- a/README.md
+++ b/README.md
@@ -43,6 +43,9 @@ Container that you want the sticky item to be contained in.
**stickClass: 'stickit'**
Class added to the sticky item once it should start being sticky.
+**activeStickClass: 'stickit-active'**
+Class added to the sticky item handled by the plugin (ie. not bigger than container)
+
**endStickClass: 'stickit-end'**
Class added to the sticky item once it has reached the end of the container
@@ -52,6 +55,14 @@ Do you already have a fixed horizontal header on the page? Offset stick 'em by t
**start: 0**
If your sticky item isn't at the top of the container, tell it where it should start being sticky.
+**overflow: true**
+If a sticky is bigger than window, you'll be able to scroll it by scrolling the window. You can
+disable this for backwards compatibility.
+
+**topProperty: 'top'**
+CSS property to use for positioning the item. You can use 'top', 'margin-top' or false to control it
+by css classes yourself. This is *required* for overflowing items.
+
**onStick: null**
You can create a callback function that fires when an item gets "stuck". The item gets passed back.
diff --git a/index.html b/index.html
index 82bbaf6..faba550 100644
--- a/index.html
+++ b/index.html
@@ -13,11 +13,17 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
diff --git a/jquery.stickem.js b/jquery.stickem.js
index df80958..ab732df 100644
--- a/jquery.stickem.js
+++ b/jquery.stickem.js
@@ -22,6 +22,7 @@
this.options = options;
this.metadata = this.$elem.data("stickem-options");
this.$win = $(window);
+ this.lastPos = 0;
};
Stickem.prototype = {
@@ -30,10 +31,14 @@
container: '.stickem-container',
stickClass: 'stickit',
endStickClass: 'stickit-end',
+ overflowStickClass: 'stickit-overflow',
+ activeStickClass: 'stickit-active',
offset: 0,
start: 0,
onStick: null,
- onUnstick: null
+ onUnstick: null,
+ overflow: true,
+ topProperty: 'top',
},
init: function() {
@@ -70,11 +75,13 @@
$elem: $this,
elemHeight: $this.height(),
$container: $this.parents(_self.config.container),
- isStuck: false
+ isStuck: $this.hasClass(_self.config.stickClass)
};
//If the element is smaller than the window
- if(_self.windowHeight > item.elemHeight) {
+ if(_self.config.overflow || _self.windowHeight > item.elemHeight) {
+ item.overflowAmount = Math.max(0, item.elemHeight - _self.windowHeight);
+ if (item.overflowAmount && item.isStuck) item.isOverflowing = 1;
item.containerHeight = item.$container.outerHeight();
item.containerInner = {
border: {
@@ -94,10 +101,12 @@
//If the element is smaller than the container
if(item.containerInnerHeight > item.elemHeight) {
_self.items.push(item);
+ item.$elem.addClass(_self.config.activeStickClass);
+ return;
}
- } else {
- item.$elem.removeClass(_self.config.stickClass + ' ' + _self.config.endStickClass);
}
+ item.$elem.removeClass(_self.config.stickClass + ' ' + _self.config.endStickClass
+ + ' ' + _self.config.activeStickClass + ' ' + _self.config.overflowStickClass);
},
getItems: function() {
@@ -125,12 +134,24 @@
var item = _self.items[i];
//If it's stuck, and we need to unstick it
- if(item.isStuck && (pos < item.containerStart || pos > item.scrollFinish)) {
+ if(item.isStuck && (pos < item.containerStart || pos > item.scrollFinish + item.overflowAmount
+ || (item.isOverflowing > 0 && pos >= _self.lastPos)
+ || (item.isOverflowing < 0 && pos <= _self.lastPos)
+ )) {
+ item.isOverflowing = 0;
item.$elem.removeClass(_self.config.stickClass);
-
+ // set current position as absolute
+ if (_self.config.topProperty) {
+ item.$elem.css(_self.config.topProperty,
+ Math.max(item.containerStart, Math.min(pos + parseInt(item.$elem.css('top'),10), item.scrollFinish))
+ - item.$elem.offsetParent().offset().top + 'px'
+ );
+ }
//only at the bottom
if(pos > item.scrollFinish) {
item.$elem.addClass(_self.config.endStickClass);
+ } else if (pos > item.containerStart) {
+ item.$elem.addClass(_self.config.overflowStickClass);
}
item.isStuck = false;
@@ -142,15 +163,35 @@
//If we need to stick it
} else if(item.isStuck === false && pos > item.containerStart && pos < item.scrollFinish) {
- item.$elem.removeClass(_self.config.endStickClass).addClass(_self.config.stickClass);
- item.isStuck = true;
-
- //if supplied fire the onStick callback
- if(_self.config.onStick) {
- _self.config.onStick(item);
+ if (_self.config.topProperty) {
+ if (item.overflowAmount) {
+ var itemOffsetTop = item.$elem.offset().top;
+ if (_self.lastPos < pos && itemOffsetTop + item.elemHeight < pos + _self.windowHeight) {
+ item.$elem.css(_self.config.topProperty, (-item.overflowAmount) + 'px');
+ item.isOverflowing = -1;
+ } else if (_self.lastPos > pos && itemOffsetTop > pos) {
+ item.$elem.css(_self.config.topProperty, '');
+ item.isOverflowing = 1;
+ } else if (itemOffsetTop > pos + _self.windowHeight || itemOffsetTop + item.elemHeight < pos) {
+ item.$elem.css(_self.config.topProperty, '');
+ } else {
+ return;
+ }
+ } else {
+ item.$elem.css(_self.config.topProperty, '');
}
+ }
+ item.$elem.removeClass(_self.config.endStickClass + ' ' + _self.config.overflowStickClass)
+ .addClass(_self.config.stickClass);
+ item.isStuck = true;
+
+ //if supplied fire the onStick callback
+ if(_self.config.onStick) {
+ _self.config.onStick(item);
+ }
}
}
+ _self.lastPos = pos;
}
},
diff --git a/screen.css b/screen.css
index 147df2f..60a3aa4 100644
--- a/screen.css
+++ b/screen.css
@@ -48,14 +48,19 @@ p {
margin-bottom: 1.5em;
}
+.stickit-active {
+ position: absolute;
+ right: 0px;
+}
+
.stickit {
margin-left: 660px;
position: fixed;
top: 0;
+ right: auto;
}
.stickit-end {
- bottom: 40px;
position: absolute;
right: 0;
}
\ No newline at end of file