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

static/js/scripts.js

-jQuery(function()
-{
-  var $toTop = jQuery("#to-top");
+(function(){
+  function addListener(target, event, callback)
+  {
+    if (target.addEventListener)
+      return target.addEventListener(event, callback, false);
+    else
+      return target.attachEvent("on" + event, callback);
+  }
 
-  $toTop.click(function ()
+  function onLoad(callback)
   {
-    jQuery("body,html").animate({
-        scrollTop: 0
-    }, 800);
-    return false;
+    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);
+      }
+    });
   });
-
-  var $window = jQuery(window);
-  var $header = jQuery("#header");
-  var headerPadding = 13;
-
-  $window.scroll(function()
-  {
-    if ($window.scrollTop() > headerPadding)
-    {
-      if ($header.hasClass("top"))
-      {
-        $header.removeClass("top");
-        $toTop.show();
-      }
-    } 
-    else
-    {
-      if (!$header.hasClass("top"))
-      {
-        $header.addClass("top");
-        $toTop.hide();
-      }
-    }
-  });
-
-  var $menu = jQuery("#menu");
-
-  jQuery('#header-hamberger').click(function()
-  {
-    if ($menu.hasClass("open")) {
-      $menu.removeClass("open");
-      $menu.attr("aria-expanded", false);
-    }
-    else
-    {
-      $menu.addClass("open");
-      $menu.attr("aria-expanded", true);
-    }
-  })
-
-});
+}());