Skip to content

Commit 759600f

Browse files
mike-zarandonamike-zarandona
committed
Added data-scrollto for section scrolling
1 parent 113279a commit 759600f

File tree

2 files changed

+50
-22
lines changed

2 files changed

+50
-22
lines changed

‎jquery.stickystack.js‎

Lines changed: 46 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
**********************************************************
33
* StickyStack.js
44
*
5-
* Version: v1.0
5+
* Version: v1.1.1
66
* Author: Mike Zarandona
7-
* Release: March 27 2014
8-
* Initial release.
7+
* Release: June 03 2014
8+
* Added data-scrollto for section scrolling
99
*
1010
* Reqs: jQuery
1111
*
@@ -24,11 +24,11 @@
2424
options = $.extend({}, $.fn.stickyStack.options, options);
2525

2626
// Variables setup
27-
var $sections = $(options.containerElement + ' > ' + options.stackingElement);
28-
var sectionsInfo = [];
27+
var $sections = $(options.containerElement + ' > ' + options.stackingElement),
28+
sectionsInfo = [],
2929

3030
// Build the styles
31-
var styles =
31+
styles =
3232
options.stackingElement + '{' +
3333
'box-sizing: border-box;' +
3434
'-moz-box-sizing: border-box;' +
@@ -54,15 +54,7 @@
5454
// Document ready()
5555
$(document).ready(function() {
5656

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-
}
57+
buildSectionsInfo();
6658

6759
// Fix the section width
6860
var origWidth = $sections.eq(0).outerWidth(true);
@@ -75,10 +67,10 @@
7567
$(window).on('scroll', function() {
7668

7769
// Current scroll position
78-
var windowScrollPos = $(window).scrollTop();
70+
var windowScrollPos = $(window).scrollTop(),
7971

8072
// Counter variable
81-
var counter = 0;
73+
counter = 0;
8274

8375
// Count how many sections should be stuck
8476
for (var t = 0; t < $sections.length; t++) {
@@ -95,6 +87,8 @@
9587
// Resize event to keep the site width fluid
9688
$(window).on('resize', function() {
9789
$sections.css('width', $(options.containerElement).width() + 'px');
90+
91+
buildSectionsInfo();
9892
});
9993

10094

@@ -125,6 +119,40 @@
125119
}
126120
}
127121

122+
123+
124+
// Helper function which builds the array sectionsInfo[] which keeps track of all the section elements
125+
function buildSectionsInfo() {
126+
// Build an array of the sections
127+
// sectionsInfo[i][0] = Position from top of document
128+
// sectionsInfo[i][1] = Height of section
129+
var runningHeightCounter = 0;
130+
131+
for (var i = 0; i < $sections.length; i++) {
132+
sectionsInfo[i] = [];
133+
134+
// record the height of the section
135+
sectionsInfo[i][1] = $sections.eq(i).outerHeight(true);
136+
137+
// write the data-scrollto
138+
$sections.eq(i).attr('data-scrollto', $sections.eq(i).offset().top);
139+
140+
// if the section is stuck, calculate its .offset() based on preceeding section heights
141+
if ( $sections.eq(i).hasClass('stuck') ) {
142+
sectionsInfo[i][0] = runningHeightCounter;
143+
runningHeightCounter += sectionsInfo[i][1];
144+
}
145+
else {
146+
sectionsInfo[i][0] = $sections.eq(i).offset().top;
147+
}
148+
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]);
152+
}
153+
console.log(runningHeightCounter);
154+
}
155+
128156
};
129157

130158

@@ -133,6 +161,6 @@
133161
$.fn.stickyStack.options = {
134162
containerElement: '.main-content-wrapper',
135163
stackingElement: 'section',
136-
boxShadow: '0 -3px 20px rgba(0, 0, 0, 0.25)'
164+
boxShadow: '0 -3px 20px rgba(0, 0, 0, 0.25)'
137165
};
138166
})(jQuery);

‎jquery.stickystack.min.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
**********************************************************
33
* StickyStack.js
44
*
5-
* Version: v1.0
5+
* Version: v1.1.1
66
* Author: Mike Zarandona
7-
* Release: March 27 2014
8-
* Initial release.
7+
* Release: June 03 2014
8+
* Added data-scrollto for section scrolling
99
*
1010
* Reqs: jQuery
1111
*
@@ -16,4 +16,4 @@
1616
* });
1717
**********************************************************
1818
*/
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);
19+
!function(t){t.fn.stickyStack=function(e){function n(t){for(var e=0,n=0;t>n;n++)e+=s.eq(n).outerHeight(!0);s.eq(0).parent().css("padding-top",e);for(var o=0;o<s.length;o++)t>0?(s.eq(o).addClass("stuck"),t--):s.eq(o).removeClass("stuck")}function o(){for(var t=0,e=0;e<s.length;e++)i[e]=[],i[e][1]=s.eq(e).outerHeight(!0),s.eq(e).attr("data-scrollto",s.eq(e).offset().top),s.eq(e).hasClass("stuck")?(i[e][0]=t,t+=i[e][1]):i[e][0]=s.eq(e).offset().top,s.eq(e).attr("data-scrollto",i[e][0]),s.eq(e).attr("data-height",i[e][1]);console.log(t)}e=t.extend({},t.fn.stickyStack.options,e);var s=t(e.containerElement+" > "+e.stackingElement),i=[],a=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">'+a+"</style>"),t(document).ready(function(){o();var t=s.eq(0).outerWidth(!0);s.css("width",t+"px")}),t(window).on("scroll",function(){for(var e=t(window).scrollTop(),o=0,a=0;a<s.length;a++)e>=i[a][0]&&o++;n(o)}),t(window).on("resize",function(){s.css("width",t(e.containerElement).width()+"px"),o()})},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)