|
2 | 2 | ********************************************************** |
3 | 3 | * StickyStack.js |
4 | 4 | * |
5 | | -* Version: v1.1.1 |
| 5 | +* Version: v1.1.2 |
6 | 6 | * Author: Mike Zarandona |
7 | | -* Release: June 03 2014 |
8 | | -* Added data-scrollto for section scrolling |
| 7 | +* Release: June 24 2014 |
| 8 | +* Added a fix for sections that are taller than the screen |
9 | 9 | * |
10 | 10 | * Reqs: jQuery |
11 | 11 | * |
|
44 | 44 |
|
45 | 45 | options.stackingElement + '.stuck + ' + options.stackingElement + ':not(.stuck) {' + |
46 | 46 | 'box-shadow: ' + options.boxShadow + ';' + |
| 47 | + '}' + |
| 48 | + |
| 49 | + options.stackingElement + '.stuck.align-bottom {' + |
| 50 | + 'top: auto !important;' + |
| 51 | + 'bottom: 0 !important;' + |
47 | 52 | '}'; |
48 | 53 |
|
49 | 54 | // Append the styles to the <head> |
50 | | - $('head').append('<style type="text/css">' + styles + '</style>'); |
| 55 | + $('head').append('<style id="sticky-stack-styles" type="text/css">' + styles + '</style>'); |
51 | 56 |
|
52 | 57 |
|
53 | 58 |
|
|
74 | 79 |
|
75 | 80 | // Count how many sections should be stuck |
76 | 81 | for (var t = 0; t < $sections.length; t++) { |
77 | | - if ( windowScrollPos >= sectionsInfo[t][0] ) { |
78 | | - counter++; |
| 82 | + // if this section has an offset, use that instead |
| 83 | + if ( $sections.eq(t).attr('data-offset') != 0 ) { |
| 84 | + if ( windowScrollPos >= sectionsInfo[t][2] + sectionsInfo[t][0] ) { |
| 85 | + counter++; |
| 86 | + } |
| 87 | + } |
| 88 | + else { |
| 89 | + if ( windowScrollPos >= sectionsInfo[t][0] ) { |
| 90 | + counter++; |
| 91 | + } |
79 | 92 | } |
80 | 93 | } |
81 | 94 |
|
|
126 | 139 | // Build an array of the sections |
127 | 140 | // sectionsInfo[i][0] = Position from top of document |
128 | 141 | // sectionsInfo[i][1] = Height of section |
129 | | - var runningHeightCounter = 0; |
| 142 | + // sectionsInfo[i][2] = Scroll offset (if taller than viewport) |
| 143 | + var runningHeightCounter = 0, |
| 144 | + viewportHeight = $(window).outerHeight(true); |
130 | 145 |
|
131 | 146 | for (var i = 0; i < $sections.length; i++) { |
132 | 147 | sectionsInfo[i] = []; |
133 | 148 |
|
134 | 149 | // record the height of the section |
135 | 150 | sectionsInfo[i][1] = $sections.eq(i).outerHeight(true); |
136 | 151 |
|
| 152 | + // test this section height against viewport |
| 153 | + if ( sectionsInfo[i][1] > viewportHeight ) { |
| 154 | + sectionsInfo[i][2] = sectionsInfo[i][1] - viewportHeight; |
| 155 | + $sections.eq(i).addClass('align-bottom'); |
| 156 | + } |
| 157 | + else { |
| 158 | + sectionsInfo[i][2] = 0; |
| 159 | + $sections.eq(i).removeClass('align-bottom'); |
| 160 | + } |
| 161 | + |
137 | 162 | // write the data-scrollto |
138 | 163 | $sections.eq(i).attr('data-scrollto', $sections.eq(i).offset().top); |
139 | 164 |
|
|
146 | 171 | sectionsInfo[i][0] = $sections.eq(i).offset().top; |
147 | 172 | } |
148 | 173 |
|
149 | | - // Attach a data attribute to be used to scroll to sections |
150 | | - $sections.eq(i).attr('data-scrollto', sectionsInfo[i][0]); |
151 | | - $sections.eq(i).attr('data-height', sectionsInfo[i][1]); |
| 174 | + // Attach data attributes |
| 175 | + $sections.eq(i) |
| 176 | + .attr('data-scrollto', sectionsInfo[i][0]) |
| 177 | + .attr('data-height', sectionsInfo[i][1]) |
| 178 | + .attr('data-offset', sectionsInfo[i][2]); |
| 179 | + |
152 | 180 | } |
153 | | - console.log(runningHeightCounter); |
154 | 181 | } |
155 | 182 |
|
156 | 183 | }; |
|
161 | 188 | $.fn.stickyStack.options = { |
162 | 189 | containerElement: '.main-content-wrapper', |
163 | 190 | stackingElement: 'section', |
164 | | - boxShadow: '0 -3px 20px rgba(0, 0, 0, 0.25)' |
| 191 | + boxShadow: '0 -3px 20px rgba(0, 0, 0, 0.25)' |
165 | 192 | }; |
166 | 193 | })(jQuery); |
0 commit comments