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() {