docs(menu): change the text color when reaching the white background

instead of changing the whole background
algolia · Nov 9, 2015 · 70655ae · 70655ae
1 parent 094fa6f
commit 70655ae
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 33 deletions.
diff --git a/docs/css/_header.sass b/docs/css/_header.sass
@@ -19,7 +19,7 @@ header.site-header
         padding-bottom: 1em
     .navbar-brand
       font-weight: 600
-      color: white !important
+      color: white
       z-index: 1
     .navbar-header
       position: relative

diff --git a/docs/index.haml b/docs/index.haml
@@ -106,39 +106,41 @@ layout: default
               {% svg img/sync.svg %}
 .spacer100
 
-%svg#curveUpColor{xmlns:"http://www.w3.org/2000/svg", version:"1.1", width:"100%", height:"100", viewBox:"0 0 100 100", preserveAspectRatio:"none"}
-  %path{d:"M0 100 C40 0 60 0 100 100 Z"}
+%section.white-bottom
 
-%section.bg-white
-  .container
-    .spacer100
-    .row
-      .col-md-4.col-md-offset-2.col-sm-offset-2.col-sm-8.m-b
-        %section#instantsearch-vp-1
-          .text-center
-            .illus-wrapper
-              %img{src:"img/icon-ux.svg", alt:"UX", width:40}
-            %h2 Search UX done right
-          %p Algolia strives to build the best search experience for the end users. All of the best practices we learned while implementing search on hundreds of websites are now packed into our widgets.
-      .col-md-4.col-md-offset-0.col-sm-offset-2.col-sm-8
-        %section#instantsearch-vp-2
-          .text-center
-            .illus-wrapper
-              %img{src:"img/icon-update.svg", alt:"Update", width:40}
-            %h2 Always improving
-          %p The instant-search experience is already deployed in hundreds of websites. We inject all the feedback and collective experience we get back into the widgets.
-    .spacer100
-    #panel-get-started
+  %svg#curveUpColor{xmlns:"http://www.w3.org/2000/svg", version:"1.1", width:"100%", height:"100", viewBox:"0 0 100 100", preserveAspectRatio:"none"}
+    %path{d:"M0 100 C40 0 60 0 100 100 Z"}
+
+  %section.bg-white
+    .container
+      .spacer100
       .row
-        .col-sm-8.text-right
-          .spacer5
-          %span.h4
-            %strong Explore Instantsearch.js.
-            Learn more about instant search's features and widgets.
-        .col-sm-4
-          %a.btn.btn-primary{href: "{{ '/documentation/' | prepend: site.baseurl }}"} Get started with Instantsearch.js
+        .col-md-4.col-md-offset-2.col-sm-offset-2.col-sm-8.m-b
+          %section#instantsearch-vp-1
+            .text-center
+              .illus-wrapper
+                %img{src:"img/icon-ux.svg", alt:"UX", width:40}
+              %h2 Search UX done right
+            %p Algolia strives to build the best search experience for the end users. All of the best practices we learned while implementing search on hundreds of websites are now packed into our widgets.
+        .col-md-4.col-md-offset-0.col-sm-offset-2.col-sm-8
+          %section#instantsearch-vp-2
+            .text-center
+              .illus-wrapper
+                %img{src:"img/icon-update.svg", alt:"Update", width:40}
+              %h2 Always improving
+            %p The instant-search experience is already deployed in hundreds of websites. We inject all the feedback and collective experience we get back into the widgets.
+      .spacer100
+      #panel-get-started
+        .row
+          .col-sm-8.text-right
+            .spacer5
+            %span.h4
+              %strong Explore Instantsearch.js.
+              Learn more about instant search's features and widgets.
+          .col-sm-4
+            %a.btn.btn-primary{href: "{{ '/documentation/' | prepend: site.baseurl }}"} Get started with Instantsearch.js
 
-{% contentfor site-footer %}
+  {% contentfor site-footer %}
 
 <script type="text/javascript" src="{{ "/js/home.js" | prepend: site.baseurl }}"></script>
 

diff --git a/docs/js/home.js b/docs/js/home.js
@@ -115,14 +115,31 @@ $(function () {
 
   scenes[0].on('start', function () {
     intro.seek(20);
-    TweenMax.to('header.site-header nav.navbar', 0.4, {backgroundColor:'rgba(0,0,0,0)'});
   });
 
   scenes[3].on('leave', function () {
     $('body:after').addClass('hide');
-    TweenMax.to('header.site-header nav.navbar', 0.4, {backgroundColor:'rgba(0,0,0,1)'});
   });
 
+  var isMenuOverWhite = false;
+  $(window).load(checkMenuOverWhite)
+  // change the menu to use black font when we arrive at the white background
+  $(window).scroll(throttle(checkMenuOverWhite, 50));
+
+  function checkMenuOverWhite() {
+    var $navbar = $('.site-header .navbar');
+    var $whiteBottom = $('.white-bottom');
+    var currentIsMenuOverWhite = overlap($navbar, $whiteBottom);
+
+    if (currentIsMenuOverWhite !== isMenuOverWhite) {
+      isMenuOverWhite = currentIsMenuOverWhite;
+      if (isMenuOverWhite) {
+        TweenMax.to('header.site-header nav.navbar a', 0.1, {color:'rgba(0,0,0,1)'});
+      } else {
+        TweenMax.to('header.site-header nav.navbar a', 0.1, {color:'rgba(255,255,255,1)'});
+      }
+    }
+  }
 });
 
 
@@ -216,3 +233,38 @@ Star.prototype.draw = function() {
   context.fill();
   context.restore();
 };
+
+// http://stackoverflow.com/questions/14012766/detecting-whether-two-divs-overlap
+function overlap($div1, $div2) {
+  var rect1 = $div1[0].getBoundingClientRect();
+  var rect2 = $div2[0].getBoundingClientRect();
+
+  return !(rect1.right < rect2.left ||
+    rect1.left > rect2.right ||
+    rect1.bottom < rect2.top + 80 ||
+    rect1.top > rect2.bottom);
+}
+
+// https://remysharp.com/2010/07/21/throttling-function-calls
+function throttle(fn, threshhold, scope) {
+  threshhold || (threshhold = 250);
+  var last,
+      deferTimer;
+  return function () {
+    var context = scope || this;
+
+    var now = +new Date,
+        args = arguments;
+    if (last && now < last + threshhold) {
+      // hold on to it
+      clearTimeout(deferTimer);
+      deferTimer = setTimeout(function () {
+        last = now;
+        fn.apply(context, args);
+      }, threshhold);
+    } else {
+      last = now;
+      fn.apply(context, args);
+    }
+  };
+}