From 66628fbb210ae8c24a88fda9cc8f048304b396d9 Mon Sep 17 00:00:00 2001 From: Adam Marciniak Date: Thu, 1 Oct 2015 22:58:04 +0700 Subject: [PATCH 1/3] Add scrollSpy indicator the to side navigation Adds a little arrow to the sidebar that indicates the current scrollposition. Similar to the one you can see in the psd but I used the back-icon.svg, so there is no need for another file. --- _jadefiles/header.jade | 11 ++++++- assets/css/3-sections/_header.sass | 21 +++++++++++++- assets/js/functions.js | 46 ++++++++++++++++++++++++++---- 3 files changed, 71 insertions(+), 7 deletions(-) diff --git a/_jadefiles/header.jade b/_jadefiles/header.jade index 42b94c2..6fcaa59 100644 --- a/_jadefiles/header.jade +++ b/_jadefiles/header.jade @@ -1,14 +1,23 @@ mixin nav-content() ul - li: a(href="#about") About + li.curpos: a(href="#about") About + .scrollspy li: a(href="#youtube") YouTube + .scrollspy //li: a(href="#mentoring") Mentoring + .scrollspy li: a(href="#articles") Articles + .scrollspy li: a(href="#vine") Vine + .scrollspy li: a(href="#design") Design + .scrollspy li: a(href="#notes") Notes + .scrollspy li: a(href="#podcast") Podcast + .scrollspy li: a(href="#contact") Contact + .scrollspy .mobile-nav +nav-content() diff --git a/assets/css/3-sections/_header.sass b/assets/css/3-sections/_header.sass index 0110a53..557305c 100644 --- a/assets/css/3-sections/_header.sass +++ b/assets/css/3-sections/_header.sass @@ -49,6 +49,22 @@ &:last-child margin-bottom: 0 + .scrollspy + display: inline-block + position: absolute + width: 10px + height: 0.6rem + opacity: 0 + margin-left: 5px + margin-top: 5.5px + background: + image: url(/assets/img/back-icon.svg) + repeat: no-repeat + transition: opacity 150ms ease-in-out + + &.curpos .scrollspy + opacity: 1 + .email-link display: block text-align: right @@ -150,7 +166,8 @@ align-items: center .site-nav, - .email-link + .email-link, + .scroll-spy display: none .logo @@ -162,3 +179,5 @@ .mobile-nav.is-open display: block transform: translateY(0%) + + diff --git a/assets/js/functions.js b/assets/js/functions.js index a2bb404..9f75152 100644 --- a/assets/js/functions.js +++ b/assets/js/functions.js @@ -21,11 +21,12 @@ function smoothScroll (duration) { var target = $( $(this).attr('href') ); - if( target.length ) { - event.preventDefault(); - $('html, body').animate({ - scrollTop: target.offset().top - }, duration); + if( target.length ) { + event.preventDefault(); + + $('html, body').animate({ + scrollTop: target.offset().top + }, duration); } }); } @@ -77,8 +78,43 @@ $(window).scroll(function() { youtubeVidScroll(); //startMentoring(); startArticles(); + scrollSpy(); }); +function scrollSpy() { + var scrollTop = $(window).scrollTop(), + wheight = $(window).height(), + anchor = $('.scrollspy').parent(), + buffer = 50, //defines the bufferarea for the first and last element + bottom = $(document).height() - buffer, + showPoint = 0.6; //element is 40% in the window + + if (scrollTop > buffer && (scrollTop + wheight) < bottom) { + + anchor.each(function() { + var href = $(this).attr('href'), + scrollSpyElm = $(href), + elmHeight = scrollSpyElm.height(), + offSet = scrollSpyElm.offset().top, + startPoint = (offSet - (scrollTop + wheight * showPoint)), + endPoint = ((offSet + elmHeight) + (scrollTop + wheight * (1 - showPoint))), + parent = $(this).parent(); + + if(startPoint <= 0 && endPoint >= 0) { + parent.addClass('curpos').siblings().removeClass('curpos'); + } + }) + + } else if (scrollTop <= buffer) { + + $('a[href="#about"]').parent().addClass('curpos').siblings().removeClass('curpos'); + + } else if ((scrollTop + wheight) >= bottom) { + + $('a[href="#contact"]').parent().addClass('curpos').siblings().removeClass('curpos'); + } +} + function youtubeVidScroll() { From c80dd7ee9bf1e9c779e51aec2f8dccc2cdfc908e Mon Sep 17 00:00:00 2001 From: Adam Marciniak Date: Thu, 1 Oct 2015 23:02:31 +0700 Subject: [PATCH 2/3] Revert "Add scrollSpy indicator the to side navigation" This reverts commit 66628fbb210ae8c24a88fda9cc8f048304b396d9. --- _jadefiles/header.jade | 11 +------ assets/css/3-sections/_header.sass | 21 +------------- assets/js/functions.js | 46 ++++-------------------------- 3 files changed, 7 insertions(+), 71 deletions(-) diff --git a/_jadefiles/header.jade b/_jadefiles/header.jade index 6fcaa59..42b94c2 100644 --- a/_jadefiles/header.jade +++ b/_jadefiles/header.jade @@ -1,23 +1,14 @@ mixin nav-content() ul - li.curpos: a(href="#about") About - .scrollspy + li: a(href="#about") About li: a(href="#youtube") YouTube - .scrollspy //li: a(href="#mentoring") Mentoring - .scrollspy li: a(href="#articles") Articles - .scrollspy li: a(href="#vine") Vine - .scrollspy li: a(href="#design") Design - .scrollspy li: a(href="#notes") Notes - .scrollspy li: a(href="#podcast") Podcast - .scrollspy li: a(href="#contact") Contact - .scrollspy .mobile-nav +nav-content() diff --git a/assets/css/3-sections/_header.sass b/assets/css/3-sections/_header.sass index 557305c..0110a53 100644 --- a/assets/css/3-sections/_header.sass +++ b/assets/css/3-sections/_header.sass @@ -49,22 +49,6 @@ &:last-child margin-bottom: 0 - .scrollspy - display: inline-block - position: absolute - width: 10px - height: 0.6rem - opacity: 0 - margin-left: 5px - margin-top: 5.5px - background: - image: url(/assets/img/back-icon.svg) - repeat: no-repeat - transition: opacity 150ms ease-in-out - - &.curpos .scrollspy - opacity: 1 - .email-link display: block text-align: right @@ -166,8 +150,7 @@ align-items: center .site-nav, - .email-link, - .scroll-spy + .email-link display: none .logo @@ -179,5 +162,3 @@ .mobile-nav.is-open display: block transform: translateY(0%) - - diff --git a/assets/js/functions.js b/assets/js/functions.js index 9f75152..a2bb404 100644 --- a/assets/js/functions.js +++ b/assets/js/functions.js @@ -21,12 +21,11 @@ function smoothScroll (duration) { var target = $( $(this).attr('href') ); - if( target.length ) { - event.preventDefault(); - - $('html, body').animate({ - scrollTop: target.offset().top - }, duration); + if( target.length ) { + event.preventDefault(); + $('html, body').animate({ + scrollTop: target.offset().top + }, duration); } }); } @@ -78,43 +77,8 @@ $(window).scroll(function() { youtubeVidScroll(); //startMentoring(); startArticles(); - scrollSpy(); }); -function scrollSpy() { - var scrollTop = $(window).scrollTop(), - wheight = $(window).height(), - anchor = $('.scrollspy').parent(), - buffer = 50, //defines the bufferarea for the first and last element - bottom = $(document).height() - buffer, - showPoint = 0.6; //element is 40% in the window - - if (scrollTop > buffer && (scrollTop + wheight) < bottom) { - - anchor.each(function() { - var href = $(this).attr('href'), - scrollSpyElm = $(href), - elmHeight = scrollSpyElm.height(), - offSet = scrollSpyElm.offset().top, - startPoint = (offSet - (scrollTop + wheight * showPoint)), - endPoint = ((offSet + elmHeight) + (scrollTop + wheight * (1 - showPoint))), - parent = $(this).parent(); - - if(startPoint <= 0 && endPoint >= 0) { - parent.addClass('curpos').siblings().removeClass('curpos'); - } - }) - - } else if (scrollTop <= buffer) { - - $('a[href="#about"]').parent().addClass('curpos').siblings().removeClass('curpos'); - - } else if ((scrollTop + wheight) >= bottom) { - - $('a[href="#contact"]').parent().addClass('curpos').siblings().removeClass('curpos'); - } -} - function youtubeVidScroll() { From 96b193a36cd6507ebda48985101fac83b46403ab Mon Sep 17 00:00:00 2001 From: Adam Marciniak Date: Thu, 1 Oct 2015 23:11:49 +0700 Subject: [PATCH 3/3] Revert "Revert "Add scrollSpy indicator the to side navigation"" This reverts commit c80dd7ee9bf1e9c779e51aec2f8dccc2cdfc908e. --- _jadefiles/header.jade | 11 ++++++- assets/css/3-sections/_header.sass | 21 +++++++++++++- assets/js/functions.js | 46 ++++++++++++++++++++++++++---- 3 files changed, 71 insertions(+), 7 deletions(-) diff --git a/_jadefiles/header.jade b/_jadefiles/header.jade index 42b94c2..6fcaa59 100644 --- a/_jadefiles/header.jade +++ b/_jadefiles/header.jade @@ -1,14 +1,23 @@ mixin nav-content() ul - li: a(href="#about") About + li.curpos: a(href="#about") About + .scrollspy li: a(href="#youtube") YouTube + .scrollspy //li: a(href="#mentoring") Mentoring + .scrollspy li: a(href="#articles") Articles + .scrollspy li: a(href="#vine") Vine + .scrollspy li: a(href="#design") Design + .scrollspy li: a(href="#notes") Notes + .scrollspy li: a(href="#podcast") Podcast + .scrollspy li: a(href="#contact") Contact + .scrollspy .mobile-nav +nav-content() diff --git a/assets/css/3-sections/_header.sass b/assets/css/3-sections/_header.sass index 0110a53..557305c 100644 --- a/assets/css/3-sections/_header.sass +++ b/assets/css/3-sections/_header.sass @@ -49,6 +49,22 @@ &:last-child margin-bottom: 0 + .scrollspy + display: inline-block + position: absolute + width: 10px + height: 0.6rem + opacity: 0 + margin-left: 5px + margin-top: 5.5px + background: + image: url(/assets/img/back-icon.svg) + repeat: no-repeat + transition: opacity 150ms ease-in-out + + &.curpos .scrollspy + opacity: 1 + .email-link display: block text-align: right @@ -150,7 +166,8 @@ align-items: center .site-nav, - .email-link + .email-link, + .scroll-spy display: none .logo @@ -162,3 +179,5 @@ .mobile-nav.is-open display: block transform: translateY(0%) + + diff --git a/assets/js/functions.js b/assets/js/functions.js index a2bb404..9f75152 100644 --- a/assets/js/functions.js +++ b/assets/js/functions.js @@ -21,11 +21,12 @@ function smoothScroll (duration) { var target = $( $(this).attr('href') ); - if( target.length ) { - event.preventDefault(); - $('html, body').animate({ - scrollTop: target.offset().top - }, duration); + if( target.length ) { + event.preventDefault(); + + $('html, body').animate({ + scrollTop: target.offset().top + }, duration); } }); } @@ -77,8 +78,43 @@ $(window).scroll(function() { youtubeVidScroll(); //startMentoring(); startArticles(); + scrollSpy(); }); +function scrollSpy() { + var scrollTop = $(window).scrollTop(), + wheight = $(window).height(), + anchor = $('.scrollspy').parent(), + buffer = 50, //defines the bufferarea for the first and last element + bottom = $(document).height() - buffer, + showPoint = 0.6; //element is 40% in the window + + if (scrollTop > buffer && (scrollTop + wheight) < bottom) { + + anchor.each(function() { + var href = $(this).attr('href'), + scrollSpyElm = $(href), + elmHeight = scrollSpyElm.height(), + offSet = scrollSpyElm.offset().top, + startPoint = (offSet - (scrollTop + wheight * showPoint)), + endPoint = ((offSet + elmHeight) + (scrollTop + wheight * (1 - showPoint))), + parent = $(this).parent(); + + if(startPoint <= 0 && endPoint >= 0) { + parent.addClass('curpos').siblings().removeClass('curpos'); + } + }) + + } else if (scrollTop <= buffer) { + + $('a[href="#about"]').parent().addClass('curpos').siblings().removeClass('curpos'); + + } else if ((scrollTop + wheight) >= bottom) { + + $('a[href="#contact"]').parent().addClass('curpos').siblings().removeClass('curpos'); + } +} + function youtubeVidScroll() {