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,39 @@
-jQuery(function()
+document.addEventListener("DOMContentLoaded", function()

[saroyanm, 2016/05/19 07:43:41]

addEventListener is not supported in older versions of IE:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener...

[juliandoucette, 2016/05/19 12:01:45]

My mistake. Will fix.

 {
-  var toTop = jQuery("#to-top");
-  toTop.click(function ()
+  // expand & contract fixed header
+
+  var header = document.getElementById("header");
+  var headerPadding = 13;

[saroyanm, 2016/05/19 07:43:41]

Detail: you are using the value only in 1 place so no need to assign it to the
variable.

[juliandoucette, 2016/05/19 12:01:45]

For readability? (To give the literal value meaning in the code)

[saroyanm, 2016/05/23 12:39:20]

Acknowledged.

+
+  window.addEventListener("scroll", 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)
+    var scrollY = window.scrollY || document.documentElement.scrollTop;
+    if (scrollY < headerPadding)
     {
-      header.css("top", -height);
-      header.animate({top: 0},function()
-      {
-          header.css("top", "");
-      });
-      header.addClass("fixed");
+      header.className = "top";
     }
     else
-      header.removeClass("fixed");
-  }
+    {
+      header.className = "";
+    }
+  }, false);
 
-  // Display "to top" button
-  var toTop = jQuery("#to-top");
-  toTop.css("opacity", scrollTop > 100 ? 1 : 0)
-});
+  // open & close header menu (on small screens)
+
+  var menu = document.getElementById("menu");

[saroyanm, 2016/05/19 07:43:40]

Detail: you can get the menu element using the "header" above instead of
document.

[juliandoucette, 2016/05/19 12:01:45]

Yes. But that is a preference.

document.getElementById is the fastest, best supported, and most widely used
method for this purpose.

element.querySelector is also appropriate, although a little slower, and not
supported < IE8.

I could also loop the header children for element.id === 'menu'. Sacrificing a
little readability and maintainability (if we later moved the element for some
reason).

I would recommend document.getElementById for this purpose. What do you think?

[saroyanm, 2016/05/23 12:39:20]

I agree with you

+  var menuButton = document.getElementById("header-hamberger");
+
+  menuButton.addEventListener("click", function()
+  {
+    if (menu.className === "open")
+    {
+      menu.className = "";
+      menu.setAttribute("aria-expanded", false);
+    }
+    else
+    {
+      menu.className = "open";
+      menu.setAttribute("aria-expanded", true);
+    }
+  }, false);
+}, false);