Skip to content

Commit 113279a

Browse files
mike-zarandonamike-zarandona
committed
Initial commit.
1 parent 72e9217 commit 113279a

File tree

3 files changed

+191
-0
lines changed

3 files changed

+191
-0
lines changed

‎README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,37 @@ StickyStack.js
22
==============
33

44
A jQuery plugin that creates a stacking effect by sticking panels as they reach the top of the viewport.
5+
6+
Check out the demo here:  [http://mikezarandona.com/stickystack](http://mikezarandona.com/stickystack)
7+
8+
 
9+
## Requirements
10+
* jQuery
11+
* A child-like sense of wonder
12+
13+
14+
 
15+
## Usage
16+
First include jQuery, then call `.stickyStack()` on the main content wrapper (or define it using options). Note that the `stackingElement`s should be direct children of the `containerElement`.
17+
18+
$('.main-content-wrapper').stickyStack();
19+
20+
21+
 
22+
## Options
23+
$('.main-content-wrapper').stickyStack({
24+
containerElement: '.main-content-wrapper',
25+
stackingElement: 'section',
26+
boxShadow: ''0 -3px 20px rgba(0, 0, 0, 0.25)'
27+
});
28+
29+
**containerElement** The selector which contains the elements to be stacked.
30+
31+
**stackingElement** The element(s) (which are direct children of `containerElement`) to be stacked on scroll.
32+
33+
**boxShadow** CSS property of the shadow applied to the first un-stuck `stackingElement`.
34+
35+
36+
 
37+
## Credits
38+
Made by [Mike Zarandona](http://twitter.com/mikezarandona) with inspiration from Matthew Peach at [DynamiX](http://dynamixwd.com)

‎jquery.stickystack.js‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
/*
2+
**********************************************************
3+
* StickyStack.js
4+
*
5+
* Version: v1.0
6+
* Author: Mike Zarandona
7+
* Release: March 27 2014
8+
* Initial release.
9+
*
10+
* Reqs: jQuery
11+
*
12+
* Usage: $('.main-content-wrapper').stickyStack({
13+
* containerElement: '.main-content-wrapper',
14+
* stackingElement: 'section',
15+
* boxShadow: '0 -3px 20px rgba(0, 0, 0, 0.25)'
16+
* });
17+
**********************************************************
18+
*/
19+
20+
(function ($, undefined) {
21+
$.fn.stickyStack = function (options) {
22+
23+
/* Override defaults with specified options. */
24+
options = $.extend({}, $.fn.stickyStack.options, options);
25+
26+
// Variables setup
27+
var $sections = $(options.containerElement + ' > ' + options.stackingElement);
28+
var sectionsInfo = [];
29+
30+
// Build the styles
31+
var styles =
32+
options.stackingElement + '{' +
33+
'box-sizing: border-box;' +
34+
'-moz-box-sizing: border-box;' +
35+
'position: relative;' +
36+
'z-index: 100;' +
37+
'}' +
38+
39+
options.stackingElement + '.stuck {' +
40+
'position: fixed;' +
41+
'top: 0;' +
42+
'z-index: 0;' +
43+
'}' +
44+
45+
options.stackingElement + '.stuck + ' + options.stackingElement + ':not(.stuck) {' +
46+
'box-shadow: ' + options.boxShadow + ';' +
47+
'}';
48+
49+
// Append the styles to the <head>
50+
$('head').append('<style type="text/css">' + styles + '</style>');
51+
52+
53+
54+
// Document ready()
55+
$(document).ready(function() {
56+
57+
// Build an array of the sections
58+
// sectionsInfo[i][0] = Position from top of document
59+
// sectionsInfo[i][1] = Height of section
60+
for (var i = 0; i < $sections.length; i++) {
61+
sectionsInfo[i] = [];
62+
63+
sectionsInfo[i][0] = $sections.eq(i).offset().top;
64+
sectionsInfo[i][1] = $sections.eq(i).outerHeight(true);
65+
}
66+
67+
// Fix the section width
68+
var origWidth = $sections.eq(0).outerWidth(true);
69+
$sections.css('width', origWidth + 'px');
70+
});
71+
72+
73+
74+
// Window scroll()
75+
$(window).on('scroll', function() {
76+
77+
// Current scroll position
78+
var windowScrollPos = $(window).scrollTop();
79+
80+
// Counter variable
81+
var counter = 0;
82+
83+
// Count how many sections should be stuck
84+
for (var t = 0; t < $sections.length; t++) {
85+
if ( windowScrollPos >= sectionsInfo[t][0] ) {
86+
counter++;
87+
}
88+
}
89+
90+
setStickies(counter);
91+
});
92+
93+
94+
95+
// Resize event to keep the site width fluid
96+
$(window).on('resize', function() {
97+
$sections.css('width', $(options.containerElement).width() + 'px');
98+
});
99+
100+
101+
102+
function setStickies(howMany) {
103+
104+
// Step 1: Calculate how much padding the parent container should get
105+
var paddingTop = 0;
106+
107+
// Total the amount of padding of stuck sections
108+
for (var p = 0; p < howMany; p++) {
109+
paddingTop += $sections.eq(p).outerHeight(true);
110+
}
111+
112+
// Append that height to the parent wrapper
113+
$sections.eq(0).parent().css('padding-top', paddingTop);
114+
115+
116+
// Step 2: Stick the sections to be stuck (heh)
117+
for (var s = 0; s < $sections.length; s++) {
118+
if (howMany > 0) {
119+
$sections.eq(s).addClass('stuck');
120+
howMany--;
121+
}
122+
else {
123+
$sections.eq(s).removeClass('stuck');
124+
}
125+
}
126+
}
127+
128+
};
129+
130+
131+
132+
// Default the defaults
133+
$.fn.stickyStack.options = {
134+
containerElement: '.main-content-wrapper',
135+
stackingElement: 'section',
136+
boxShadow: '0 -3px 20px rgba(0, 0, 0, 0.25)'
137+
};
138+
})(jQuery);

‎jquery.stickystack.min.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/*
2+
**********************************************************
3+
* StickyStack.js
4+
*
5+
* Version: v1.0
6+
* Author: Mike Zarandona
7+
* Release: March 27 2014
8+
* Initial release.
9+
*
10+
* Reqs: jQuery
11+
*
12+
* Usage: $('.main-content-wrapper').stickyStack({
13+
* containerElement: '.main-content-wrapper',
14+
* stackingElement: 'section',
15+
* boxShadow: '0 -3px 20px rgba(0, 0, 0, 0.25)'
16+
* });
17+
**********************************************************
18+
*/
19+
!function(t){t.fn.stickyStack=function(e){function n(t){for(var e=0,n=0;t>n;n++)e+=o.eq(n).outerHeight(!0);o.eq(0).parent().css("padding-top",e);for(var i=0;i<o.length;i++)t>0?(o.eq(i).addClass("stuck"),t--):o.eq(i).removeClass("stuck")}e=t.extend({},t.fn.stickyStack.options,e);var o=t(e.containerElement+" > "+e.stackingElement),i=[],s=e.stackingElement+"{box-sizing: border-box;-moz-box-sizing: border-box;position: relative;z-index: 100;}"+e.stackingElement+".stuck {position: fixed;top: 0;z-index: 0;}"+e.stackingElement+".stuck + "+e.stackingElement+":not(.stuck) {box-shadow: "+e.boxShadow+";}";t("head").append('<style type="text/css">'+s+"</style>"),t(document).ready(function(){for(var t=0;t<o.length;t++)i[t]=[],i[t][0]=o.eq(t).offset().top,i[t][1]=o.eq(t).outerHeight(!0);var e=o.eq(0).outerWidth(!0);o.css("width",e+"px")}),t(window).on("scroll",function(){for(var e=t(window).scrollTop(),s=0,c=0;c<o.length;c++)e>=i[c][0]&&s++;n(s)}),t(window).on("resize",function(){o.css("width",t(e.containerElement).width()+"px")})},t.fn.stickyStack.options={containerElement:".main-content-wrapper",stackingElement:"section",boxShadow:"0 -3px 20px rgba(0, 0, 0, 0.25)"}}(jQuery);

0 commit comments

Comments
 (0)