I guess jquery is staying

_data/navigation.yml

@@ -1,28 +1,28 @@
 - section: intro
   title: Intro
-  number: 1
+  number: 0
 
 - section: about
   title: About
-  number: 2
+  number: 1
 
 - section: services
   title: What I Do
-  number: 3
+  number: 2
 
 - section: skills
   title: Skills
-  number: 4
+  number: 3
 
 - section: experience
   title: Experience
-  number: 5
+  number: 4
 
 - section: portfolio
   title: Portfolio
-  number: 6
+  number: 5
 
 - section: contact
   title: Contact
-  number: 7
+  number: 6
 

_includes/nav.html

@@ -10,11 +10,13 @@
     {% endfor %}
   </ul>
 </nav>
+
 <div id="toggle" class="container">
   <span class="line top"></span>
   <span class="line middle"></span>
   <span class="line bottom"></span>
 </div>
+
 <div id="overlay" class="overlay">
   <div class="logo"><img class="logo-img" src="img/logo-white.png" alt="logo"><span>Brittany Chiang</span></div>
   <nav class="overlay-menu">

_scripts/main.js

@@ -1,57 +1,46 @@
 $(function() {
-  const contentSections = $('.section');
-  const navigationItems = $('#dot-nav a');
-  const overlayItems = $('#overlay a');
-
-  // ==================== VERTICAL NAV ON SCROLL ==================== //
-
-  updateNavigation();
-
-  $(window).on('scroll', function() {
-    updateNavigation();
-  });
-
-  //smooth scroll to the section
-  navigationItems.on('click', function(event) {
-    event.preventDefault();
-    smoothScroll($(this.hash));
-  });
-
-  overlayItems.on('click', function(event) {
-    event.preventDefault();
-    smoothScroll($(this.hash));
-    $('#toggle').click();
-  });
-
-  // smooth scroll to second section
-  $('.scroll-down').on('click', function(event) {
-    event.preventDefault();
-    smoothScroll($(this.hash));
-  });
-
-  // close navigation on touch devices when selectinG an elemnt from the list
-  $('.touch #dot-nav a').on('click', function() {
-    $('.touch #dot-nav').removeClass('open');
-  });
-
 
   function updateNavigation() {
-    contentSections.each(function() {
+    $('.section').each(function() {
-      const $this = $(this);
+      const activeSection = $('#dot-nav a[href="#' + $(this).attr('id') + '"]').data('number');
-      const activeSection = $('#dot-nav a[href="#' + $this.attr('id') + '"]').data('number') - 1;
+      const offsetTop = $(this).offset().top;
+      const halfWindowHeight = $(window).height() / 2;
+      const distanceFromTop = $(window).scrollTop();
+      const cond1 = offsetTop - halfWindowHeight < distanceFromTop;
+      const cond2 = offsetTop + $(this).height() - halfWindowHeight > distanceFromTop;
 
-      if (($this.offset().top - $(window).height() / 2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop())) {
+      if (cond1 && cond2) {
-        navigationItems.eq(activeSection).addClass('is-selected');
+        $('#dot-nav a').eq(activeSection).addClass('is-selected');
       } else {
-        navigationItems.eq(activeSection).removeClass('is-selected');
+        $('#dot-nav a').eq(activeSection).removeClass('is-selected');
       }
     });
   }
 
+  updateNavigation();
+  window.addEventListener('scroll', updateNavigation);
+
+
   function smoothScroll(target) {
-    $('body,html').animate({ 'scrollTop': target.offset().top + 50 }, 600);
+    $('body').animate({ 'scrollTop': target.offset().top + 50 }, 500);
   }
 
+  $('.scroll-down').on('click', function(ev) {
+    ev.preventDefault();
+    smoothScroll($(this.hash));
+  });
+
+  $('#dot-nav a').on('click', function(ev) {
+    ev.preventDefault();
+    smoothScroll($(this.hash));
+  });
+
+  $('#overlay a').on('click', function(ev) {
+    ev.preventDefault();
+    smoothScroll($(this.hash));
+    $('#toggle').click();
+  });
+
 });
 
 
@@ -161,6 +150,6 @@ const limit = 300;
 function autoExpand() {
   textarea.style.height = "";
   textarea.style.height = `${Math.min(textarea.scrollHeight, limit)}px`;
-};
+}
 
 textarea.addEventListener('input', autoExpand);

_scss/partials/_dotNav.scss

@@ -20,7 +20,7 @@
   a {
     display: inline-block;
     @include clearfix;
-    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
     span {
       float: right;
       display: inline-block;

js/main.js

@@ -1 +1 @@
-"use strict";function handleDotNav(){var t=window.innerWidth>768,e=about.offsetTop-about.offsetTop/4,o=window.scrollY>e;t&&o?dotNav.classList.add("active"):dotNav.classList.remove("active")}function switchNavs(){var t=window.innerWidth>768,e=overlay.classList.contains("open");t?(dotNav.classList.add("active"),e&&(hamburger.classList.remove("active"),overlay.classList.remove("open"))):dotNav.classList.remove("active")}function toggleMenu(){this.classList.toggle("active"),overlay.classList.toggle("open"),document.body.classList.toggle("noScroll")}function focusInput(){this.parentElement.classList.add("is-active","is-completed")}function blurInput(){this.parentElement.classList.remove("is-active","is-completed")}function autoExpand(){textarea.style.height="",textarea.style.height=Math.min(textarea.scrollHeight,limit)+"px"}$(function(){function t(){o.each(function(){var t=$(this),e=$('#dot-nav a[href="#'+t.attr("id")+'"]').data("number")-1;t.offset().top-$(window).height()/2<$(window).scrollTop()&&t.offset().top+t.height()-$(window).height()/2>$(window).scrollTop()?n.eq(e).addClass("is-selected"):n.eq(e).removeClass("is-selected")})}function e(t){$("body,html").animate({scrollTop:t.offset().top+50},600)}var o=$(".section"),n=$("#dot-nav a"),i=$("#overlay a");t(),$(window).on("scroll",function(){t()}),n.on("click",function(t){t.preventDefault(),e($(this.hash))}),i.on("click",function(t){t.preventDefault(),e($(this.hash)),$("#toggle").click()}),$(".scroll-down").on("click",function(t){t.preventDefault(),e($(this.hash))}),$(".touch #dot-nav a").on("click",function(){$(".touch #dot-nav").removeClass("open")})});var dotNav=document.querySelector("#dot-nav"),about=document.querySelector("#about-section");window.addEventListener("scroll",handleDotNav);var hamburger=document.querySelector("#toggle"),overlay=document.querySelector("#overlay");window.addEventListener("resize",switchNavs),hamburger.addEventListener("click",toggleMenu);var isMobile={Android:function(){return navigator.userAgent.match(/Android/i)},BlackBerry:function(){return navigator.userAgent.match(/BlackBerry/i)},iOS:function(){return navigator.userAgent.match(/iPhone|iPad|iPod/i)},Opera:function(){return navigator.userAgent.match(/Opera Mini/i)},Windows:function(){return navigator.userAgent.match(/IEMobile/i)},any:function(){return isMobile.Android()||isMobile.BlackBerry()||isMobile.iOS()||isMobile.Opera()||isMobile.Windows()}};isMobile.any()||skrollr.init({render:function(t){},smoothScrolling:!1,forceHeight:!1});var contactInput=document.querySelectorAll(".contact-input");contactInput.forEach(function(t){return t.addEventListener("focus",focusInput)}),contactInput.forEach(function(t){return t.addEventListener("blur",blurInput)});var textarea=document.querySelector("#message"),limit=300;textarea.addEventListener("input",autoExpand);
+"use strict";function handleDotNav(){var t=window.innerWidth>768,e=about.offsetTop-about.offsetTop/4,n=window.scrollY>e;t&&n?dotNav.classList.add("active"):dotNav.classList.remove("active")}function switchNavs(){var t=window.innerWidth>768,e=overlay.classList.contains("open");t?(dotNav.classList.add("active"),e&&(hamburger.classList.remove("active"),overlay.classList.remove("open"))):dotNav.classList.remove("active")}function toggleMenu(){this.classList.toggle("active"),overlay.classList.toggle("open"),document.body.classList.toggle("noScroll")}function focusInput(){this.parentElement.classList.add("is-active","is-completed")}function blurInput(){this.parentElement.classList.remove("is-active","is-completed")}function autoExpand(){textarea.style.height="",textarea.style.height=Math.min(textarea.scrollHeight,limit)+"px"}$(function(){function t(){$(".section").each(function(){var t=$('#dot-nav a[href="#'+$(this).attr("id")+'"]').data("number"),e=$(this).offset().top,n=$(window).height()/2,o=$(window).scrollTop(),i=e-n<o,a=e+$(this).height()-n>o;i&&a?$("#dot-nav a").eq(t).addClass("is-selected"):$("#dot-nav a").eq(t).removeClass("is-selected")})}function e(t){$("body").animate({scrollTop:t.offset().top+50},500)}t(),window.addEventListener("scroll",t),$(".scroll-down").on("click",function(t){t.preventDefault(),e($(this.hash))}),$("#dot-nav a").on("click",function(t){t.preventDefault(),e($(this.hash))}),$("#overlay a").on("click",function(t){t.preventDefault(),e($(this.hash)),$("#toggle").click()})});var dotNav=document.querySelector("#dot-nav"),about=document.querySelector("#about-section");window.addEventListener("scroll",handleDotNav);var hamburger=document.querySelector("#toggle"),overlay=document.querySelector("#overlay");window.addEventListener("resize",switchNavs),hamburger.addEventListener("click",toggleMenu);var isMobile={Android:function(){return navigator.userAgent.match(/Android/i)},BlackBerry:function(){return navigator.userAgent.match(/BlackBerry/i)},iOS:function(){return navigator.userAgent.match(/iPhone|iPad|iPod/i)},Opera:function(){return navigator.userAgent.match(/Opera Mini/i)},Windows:function(){return navigator.userAgent.match(/IEMobile/i)},any:function(){return isMobile.Android()||isMobile.BlackBerry()||isMobile.iOS()||isMobile.Opera()||isMobile.Windows()}};isMobile.any()||skrollr.init({render:function(t){},smoothScrolling:!1,forceHeight:!1});var contactInput=document.querySelectorAll(".contact-input");contactInput.forEach(function(t){return t.addEventListener("focus",focusInput)}),contactInput.forEach(function(t){return t.addEventListener("blur",blurInput)});var textarea=document.querySelector("#message"),limit=300;textarea.addEventListener("input",autoExpand);