who needs jquery when we have vanilla js

_scripts/main.js

@@ -3,6 +3,8 @@ $(function() {
   const navigationItems = $('#dot-nav a');
   const overlayItems = $('#overlay a');
 
+  // ==================== VERTICAL NAV ON SCROLL ==================== //
+
   updateNavigation();
 
   $(window).on('scroll', function() {
@@ -32,17 +34,6 @@ $(function() {
     $('.touch #dot-nav').removeClass('open');
   });
 
-  // ==================== VERTICAL NAV ON SCROLL ==================== //
-  $(document).scroll(function() {
-    const x = $(window).width();
-    const y = $(this).scrollTop();
-    const $nav = $('#dot-nav');
-    if (x > 768 && y > 500) {
-      $nav.fadeIn();
-    } else {
-      $nav.fadeOut();
-    }
-  });
 
   function updateNavigation() {
     contentSections.each(function() {
@@ -61,84 +52,115 @@ $(function() {
     $('body,html').animate({ 'scrollTop': target.offset().top + 50 }, 600);
   }
 
-  // ==================== MOBILE MENU ==================== //
-  $('#toggle').click(function(e) {
-    $(this).toggleClass('active');
-    $('#overlay').toggleClass('open');
-    $('body').toggleClass('noScroll');
-  });
-
-  $(window).on('resize', function(event) {
-    const windowWidth = $(window).width();
-    const isOpen = $('#overlay').hasClass('open');
-
-    if (windowWidth > 768) {
-      $('#dot-nav').show();
-      if (isOpen) {
-        $('#toggle').removeClass('active');
-        $('#overlay').removeClass('open');
-      }
-    } else if (windowWidth < 768) {
-      $('#dot-nav').hide();
-    }
-  });
-
-  // ==================== CONTACT FORM ==================== //
-  const $contactInput = $('.contact-input');
-
-  $contactInput.focus(function() {
-    $(this).parent().addClass('is-active is-completed');
-  });
-
-  $contactInput.focusout(function() {
-    if ($(this).val() === "") {
-      $(this).parent().removeClass('is-completed');
-    }
-    $(this).parent().removeClass('is-active');
-  });
-
-  $(document).one('focus.textarea', '.autoExpand', function() {
-    const savedValue = this.value;
-    this.value = '';
-    this.baseScrollHeight = this.scrollHeight;
-    this.value = savedValue;
-  }).on('input.textarea', '.autoExpand', function() {
-    const minRows = this.getAttribute('data-min-rows') | 0;
-    this.rows = minRows;
-    const rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 17);
-    this.rows = minRows + rows;
-  });
-
-  const 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());
-    }
-  };
-
-  if (!isMobile.any()) {
-    skrollr.init({
-      render: function(data) {
-        //Debugging - Log the current scroll position.
-        // console.log(data.curTop);
-      },
-      smoothScrolling: false,
-      forceHeight: false
-    });
-  }
-
 });
+
+
+// hide dot nav if we are on the intro section
+const dotNav = document.querySelector('#dot-nav');
+const about = document.querySelector('#about-section');
+
+function handleDotNav() {
+  const isDesktop = window.innerWidth > 768;
+  const topOfAbout = about.offsetTop - (about.offsetTop / 4);
+  const isBelowIntro = window.scrollY > topOfAbout;
+
+  if (isDesktop && isBelowIntro) {
+    dotNav.classList.add('active');
+  } else {
+    dotNav.classList.remove('active');
+  }
+}
+
+window.addEventListener('scroll', handleDotNav);
+
+
+// hide or show hamburger menu depending on window width
+const hamburger = document.querySelector('#toggle');
+const overlay = document.querySelector('#overlay');
+
+function switchNavs() {
+  const isDesktop = window.innerWidth > 768;
+  const menuOpen = overlay.classList.contains('open');
+
+  if (isDesktop) {
+    dotNav.classList.add('active');
+    if (menuOpen) {
+      hamburger.classList.remove('active');
+      overlay.classList.remove('open');
+    }
+  } else {
+    dotNav.classList.remove('active');
+  }
+}
+
+window.addEventListener('resize', switchNavs);
+
+
+// Toggle mobile menu open and closed
+function toggleMenu() {
+  this.classList.toggle('active');
+  overlay.classList.toggle('open');
+  document.body.classList.toggle('noScroll');
+}
+
+hamburger.addEventListener('click', toggleMenu);
+
+
+const isMobile = {
+  Android() {
+    return navigator.userAgent.match(/Android/i);
+  },
+  BlackBerry() {
+    return navigator.userAgent.match(/BlackBerry/i);
+  },
+  iOS() {
+    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
+  },
+  Opera() {
+    return navigator.userAgent.match(/Opera Mini/i);
+  },
+  Windows() {
+    return navigator.userAgent.match(/IEMobile/i);
+  },
+  any() {
+    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
+  }
+};
+
+// turn off parallax effect on mobile devices
+if (!isMobile.any()) {
+  skrollr.init({
+    render: function(data) {
+      //Debugging - Log the current scroll position.
+      // console.log(data.curTop);
+    },
+    smoothScrolling: false,
+    forceHeight: false
+  });
+}
+
+
+// toggle contact input classes on focus or blur
+const contactInput = document.querySelectorAll('.contact-input');
+
+function focusInput() {
+  this.parentElement.classList.add('is-active', 'is-completed');
+}
+function blurInput() {
+  this.parentElement.classList.remove('is-active', 'is-completed');
+}
+
+contactInput.forEach(input => input.addEventListener('focus', focusInput));
+contactInput.forEach(input => input.addEventListener('blur', blurInput));
+
+
+// dynamically expand textarea
+const textarea = document.querySelector('#message');
+const limit = 300;
+
+function autoExpand() {
+  textarea.style.height = "";
+  textarea.style.height = `${Math.min(textarea.scrollHeight, limit)}px`;
+};
+
+textarea.addEventListener('input', autoExpand);

_scss/partials/_contact.scss

@@ -52,11 +52,13 @@
       }
       .input-label {
         display: block;
-        padding-left: 4px;
+        font-family: $Gotham, $sans-serif-stack;
-        font-size: 1.15em;
+        font-size: 0.9em;
-        font-weight: 500;
+        font-weight: 700;
+        text-transform: uppercase;
         transform: translateY(25px);
         color: $white;
+        margin-bottom: 10px;
         transition: all 0.5s ease-in-out;
       }
       .contact-input {
@@ -92,7 +94,7 @@
       color: #00b7c7;
     }
     .is-completed .input-label {
-      font-size: 14px;
+      font-size: 0.75em;
       font-weight: 700;
       transform: translateY(0);
       padding: 0;

_scss/partials/_dotNav.scss

@@ -1,9 +1,16 @@
 #dot-nav {
   position: fixed;
   right: 34px;
-  @include center(y);
   z-index: 1;
-  display: none;
+  @include center(y);
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s, opacity 0.5s ease;
+  &.active {
+    visibility: visible;
+    opacity: 1;
+    transition: visibility 0s, opacity 0.5s ease;
+  }
   @include MQ(M) {
     display: none;
   }

js/main.js

@@ -1 +1 @@
-"use strict";$(function(){function t(){n.each(function(){var t=$(this),o=$('#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()?e.eq(o).addClass("is-selected"):e.eq(o).removeClass("is-selected")})}function o(t){$("body,html").animate({scrollTop:t.offset().top+50},600)}var n=$(".section"),e=$("#dot-nav a"),i=$("#overlay a");t(),$(window).on("scroll",function(){t()}),e.on("click",function(t){t.preventDefault(),o($(this.hash))}),i.on("click",function(t){t.preventDefault(),o($(this.hash)),$("#toggle").click()}),$(".scroll-down").on("click",function(t){t.preventDefault(),o($(this.hash))}),$(".touch #dot-nav a").on("click",function(){$(".touch #dot-nav").removeClass("open")}),$(document).scroll(function(){var t=$(window).width(),o=$(this).scrollTop(),n=$("#dot-nav");t>768&&o>500?n.fadeIn():n.fadeOut()}),$("#toggle").click(function(t){$(this).toggleClass("active"),$("#overlay").toggleClass("open"),$("body").toggleClass("noScroll")}),$(window).on("resize",function(t){var o=$(window).width(),n=$("#overlay").hasClass("open");o>768?($("#dot-nav").show(),n&&($("#toggle").removeClass("active"),$("#overlay").removeClass("open"))):o<768&&$("#dot-nav").hide()});var a=$(".contact-input");a.focus(function(){$(this).parent().addClass("is-active is-completed")}),a.focusout(function(){""===$(this).val()&&$(this).parent().removeClass("is-completed"),$(this).parent().removeClass("is-active")}),$(document).one("focus.textarea",".autoExpand",function(){var t=this.value;this.value="",this.baseScrollHeight=this.scrollHeight,this.value=t}).on("input.textarea",".autoExpand",function(){var t=0|this.getAttribute("data-min-rows");this.rows=t;var o=Math.ceil((this.scrollHeight-this.baseScrollHeight)/17);this.rows=t+o});var s={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 s.Android()||s.BlackBerry()||s.iOS()||s.Opera()||s.Windows()}};s.any()||skrollr.init({render:function(t){},smoothScrolling:!1,forceHeight:!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);