Issue 2675 - Implemented responsive header for web.eyeo.com

static/js/scripts.js

Index: static/js/scripts.js
===================================================================
--- a/static/js/scripts.js
+++ b/static/js/scripts.js
@@ -1,39 +1,68 @@
-jQuery(function()
-{
-  var toTop = jQuery("#to-top");
-  toTop.click(function ()
-  {
-    jQuery("body,html").animate({
-        scrollTop: 0
-    }, 800);
-    return false;
-  });
-});
-
-jQuery(window).scroll(function()
-{
-  var scrollTop = jQuery(window).scrollTop();
-
-  // Fix header
-  var header = jQuery("#header");
-  var height = header.height();
-  var fixed = (scrollTop > height);
-  if (fixed != header.hasClass("fixed"))
-  {
-    if (fixed)
-    {
-      header.css("top", -height);
-      header.animate({top: 0},function()
-      {
-          header.css("top", "");
-      });
-      header.addClass("fixed");
-    }
-    else
-      header.removeClass("fixed");
-  }
-
-  // Display "to top" button
-  var toTop = jQuery("#to-top");
-  toTop.css("opacity", scrollTop > 100 ? 1 : 0)
-});
+(function(){
+
+  function addListener(target, event, callback)
+  {
+    if (target.addEventListener)
+    {
+      return target.addEventListener(event, callback, false);
+    }
+    else
+    {
+      return target.attachEvent("on" + event, callback);
+    }
+  }
+
+  function onLoad(callback)
+  {
+    if (document.addEventListener)
+    {
+      return addListener(document, "DOMContentLoaded", callback);
+    }
+    else
+    {
+      return addListener(window, "load", callback);
+    }
+  }
+
+  onLoad(function()
+  {
+    // expand & contract fixed header
+
+    var header = document.getElementById("header");
+    var headerPadding = 13;
+
+    addListener(window, "scroll", function()
+    {
+      var scrollY = window.scrollY || document.documentElement.scrollTop;
+
+      if (scrollY < headerPadding)
+      {
+        header.className = "top";
+      }
+      else
+      {
+        header.className = "";
+      }
+    });
+
+    // open & close header menu (on small screens)
+
+    var menu = document.getElementById("menu");
+    var menuButton = document.getElementById("header-hamburger");
+
+    addListener(menuButton, "click", function()
+    {
+      if (menu.className === "open")
+      {
+        menu.className = "";
+        menu.setAttribute("aria-expanded", false);
+      }
+      else
+      {
+        menu.className = "open";
+        menu.setAttribute("aria-expanded", true);
+      }
+    });
+  });
+
+}());