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

static/js/scripts.js

Index: static/js/scripts.js
diff --git a/static/js/scripts.js b/static/js/scripts.js
index c08b3b5b4843635dd7ba555f902a85e56f74e7b3..9ba390e22a503d2fb709cd8bfae6d9e6bc0ec50e 100644
--- a/static/js/scripts.js
+++ b/static/js/scripts.js
@@ -1,39 +1,52 @@
 jQuery(function()
 {
-  var toTop = jQuery("#to-top");
-  toTop.click(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();
+  var $window = jQuery(window);
+  var $header = jQuery("#header");
+  var headerPadding = 13;
 
-  // Fix header
-  var header = jQuery("#header");
-  var height = header.height();
-  var fixed = (scrollTop > height);
-  if (fixed != header.hasClass("fixed"))
+  $window.scroll(function()
   {
-    if (fixed)
+    if ($window.scrollTop() > headerPadding)
     {
-      header.css("top", -height);
-      header.animate({top: 0},function()
+      if ($header.hasClass("top"))
       {
-          header.css("top", "");
-      });
-      header.addClass("fixed");
+        $header.removeClass("top");
+        $toTop.show();
+      }
+    } 
+    else
+    {
+      if (!$header.hasClass("top"))
+      {
+        $header.addClass("top");
+        $toTop.hide();
+      }
+    }
+  });
+
+  jQuery('#header-hamberger').click(function()
+  {
+    var $menu = jQuery("#menu");
+
+    if ($menu.hasClass("open")) {
+      $menu.removeClass("open");
+      $menu.attr("aria-expanded", false);
     }
     else
-      header.removeClass("fixed");
-  }
+    {
+      $menu.addClass("open");
+      $menu.attr("aria-expanded", true);
+    }
+  })
 
-  // Display "to top" button
-  var toTop = jQuery("#to-top");
-  toTop.css("opacity", scrollTop > 100 ? 1 : 0)
 });