script and css to change nav background

src/css/layout/_nav.scss

@@ -4,8 +4,16 @@
   #nav {
     @include vendor('transition', (
       'height #{_duration(transition)} ease',
+      'background #{_duration(transition)} ease',
     ));
     height: 80px;
+    position: fixed;
+    width: 100%;
+    background: #f2f2f2;
+
+    &.scrolled {
+      background: #ffffff;
+    }
 
     > #wrapper {
       margin: auto;

src/js/main.js

@@ -1,3 +1,4 @@
+//toggle menu burger animation
 document.getElementById("menuToggle").addEventListener("click", menuToggle);
 function menuToggle() {
   var bars = document.getElementsByClassName('bar');
@@ -5,3 +6,12 @@ function menuToggle() {
     bars[i].classList.toggle('active');
   }
 }
+
+//toggle nav backgroundcolor
+window.addEventListener('scroll', function() {
+  if (window.pageYOffset == 0) {
+    document.getElementById("nav").classList.remove('scrolled');
+  } else {
+    document.getElementById("nav").classList.add('scrolled');
+  }
+});