From e690848eb4723375edf9fd86b7a690678bab9eaa Mon Sep 17 00:00:00 2001
From: Thefeli73 <thefeli73@hotmail.com>
Date: Wed, 15 Jan 2020 18:27:44 +0100
Subject: [PATCH] script and css to change nav background

---
 src/css/layout/_nav.scss |  8 ++++++++
 src/js/main.js           | 10 ++++++++++
 2 files changed, 18 insertions(+)

diff --git a/src/css/layout/_nav.scss b/src/css/layout/_nav.scss
index 4dfffd0..0ff5c40 100644
--- a/src/css/layout/_nav.scss
+++ b/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;
diff --git a/src/js/main.js b/src/js/main.js
index 9478fdc..c13eca6 100644
--- a/src/js/main.js
+++ b/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');
+  }
+});