diff --git a/_includes/head.html b/_includes/head.html index 309866927d..c16f2b27c9 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -38,9 +38,9 @@ - + - + diff --git a/assets/js/jquery.scrollex.min.js b/assets/js/jquery.scrollex.min.js new file mode 100644 index 0000000000..a4727fed3e --- /dev/null +++ b/assets/js/jquery.scrollex.min.js @@ -0,0 +1,2 @@ +/* jquery.scrollex v0.2.1 | (c) @ajlkn | github.com/ajlkn/jquery.scrollex | MIT licensed */ +!function(t){function e(t,e,n){return"string"==typeof t&&("%"==t.slice(-1)?t=parseInt(t.substring(0,t.length-1))/100*e:"vh"==t.slice(-2)?t=parseInt(t.substring(0,t.length-2))/100*n:"px"==t.slice(-2)&&(t=parseInt(t.substring(0,t.length-2)))),t}var n=t(window),i=1,o={};n.on("scroll",function(){var e=n.scrollTop();t.map(o,function(t){window.clearTimeout(t.timeoutId),t.timeoutId=window.setTimeout(function(){t.handler(e)},t.options.delay)})}).on("load",function(){n.trigger("scroll")}),jQuery.fn.scrollex=function(l){var s=t(this);if(0==this.length)return s;if(this.length>1){for(var r=0;r=i&&o>=t};break;case"bottom":h=function(t,e,n,i,o){return n>=i&&o>=n};break;case"middle":h=function(t,e,n,i,o){return e>=i&&o>=e};break;case"top-only":h=function(t,e,n,i,o){return i>=t&&n>=i};break;case"bottom-only":h=function(t,e,n,i,o){return n>=o&&o>=t};break;default:case"default":h=function(t,e,n,i,o){return n>=i&&o>=t}}return c=function(t){var i,o,l,s,r,a,u=this.state,h=!1,c=this.$element.offset();i=n.height(),o=t+i/2,l=t+i,s=this.$element.outerHeight(),r=c.top+e(this.options.top,s,i),a=c.top+s-e(this.options.bottom,s,i),h=this.test(t,o,l,r,a),h!=u&&(this.state=h,h?this.options.enter&&this.options.enter.apply(this.element):this.options.leave&&this.options.leave.apply(this.element)),this.options.scroll&&this.options.scroll.apply(this.element,[(o-r)/(a-r)])},p={id:a,options:u,test:h,handler:c,state:null,element:this,$element:s,timeoutId:null},o[a]=p,s.data("_scrollexId",p.id),p.options.initialize&&p.options.initialize.apply(this),s},jQuery.fn.unscrollex=function(){var e=t(this);if(0==this.length)return e;if(this.length>1){for(var n=0;n=d[i].start&&n<=d[i].end&&(c=i,o=!0),t++;u.lastHack&&n+r.height()>=a.height()&&(c=i,o=!0),o&&!f.hasClass("scrollzer-locked")&&(f.removeClass(u.activeClassName),d[c].link.addClass(u.activeClassName))}),r.trigger("resize")})}; diff --git a/assets/js/main.js b/assets/js/main.js index 481fc272ef..4d3f704da8 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -41,50 +41,86 @@ ); }); - // Scrolly links. - $('.scrolly').scrolly(); - // Nav. var $nav_a = $('#nav a.scrolly'); // Scrolly-fy links. $nav_a - .scrolly() - .on('click', function(e) { + .addClass('scrolly') + .on('click', function(e) { - var t = $(this), - href = t.attr('href'); + var $this = $(this); - if (href[0] != '#') - return; + // External link? Bail. + if ($this.attr('href').charAt(0) != '#') + return false; - e.preventDefault(); + // Prevent default. + e.preventDefault(); - // Clear active and lock scrollzer until scrolling has stopped - $nav_a - .removeClass('active') - .addClass('scrollzer-locked'); + if ($this.hasClass("active")) + return false; + // Deactivate all links. + $nav_a.removeClass('active'); + $nav_a.removeClass('active-locked'); - // Set this link to active - t.addClass('active'); + // Activate link *and* lock it (so Scrollex doesn't try to activate other links as we're scrolling to this one's section). - }); + $this + .addClass('active') + .addClass('active-locked'); + //Return false essentially calls both preventDefault() and stopPropagation() + return false; + + }) // Initialize scrollzer. - var ids = []; - $nav_a.each(function() { + .each(function() { + + var $this = $(this), + id = $this.attr('href'), + $section = $(id); + + // No section for this link? Bail. + if ($section.length < 1) + return; + + // Scrollex. + $section.scrollex({ + mode: 'middle', + top: '-10vh', + bottom: '-10vh', + initialize: function() { - var href = $(this).attr('href'); + // Deactivate section. + $section.addClass('inactive'); - if (href[0] != '#') - return; + }, + enter: function() { - ids.push(href.substring(1)); + // Activate section. + $section.removeClass('inactive'); - }); + // No locked links? Deactivate all links and activate this section's one. + if ($nav_a.filter('.active-locked').length == 0) { + + $nav_a.removeClass('active'); + $this.addClass('active'); + + } + + // Otherwise, if this section's link is the one that's locked, unlock it. + else if ($this.hasClass('active-locked')) + $this.removeClass('active-locked'); + + } + }); + }); + + // Scrolly links. + $('.scrolly').scrolly(); - $.scrollzer(ids, { pad: 200, lastHack: true }); // Header (narrower + mobile).