svn commit: r1452844 - /incubator/bloodhound/trunk/bloodhound_dashboard/bhdashboard/htdocs/js/bloodhound-stickyscroll.js

[gjm]

Author: gjm
Date: Tue Mar  5 15:14:44 2013
New Revision: 1452844

URL: http://svn.apache.org/r1452844
Log:
refactoring sticky js to provide the breadcrumb as sticky area for small 
screens and full header for screen heights over 768px - towards #431

Modified:
    
incubator/bloodhound/trunk/bloodhound_dashboard/bhdashboard/htdocs/js/bloodhound-stickyscroll.js

Modified: 
incubator/bloodhound/trunk/bloodhound_dashboard/bhdashboard/htdocs/js/bloodhound-stickyscroll.js
URL: 
http://svn.apache.org/viewvc/incubator/bloodhound/trunk/bloodhound_dashboard/bhdashboard/htdocs/js/bloodhound-stickyscroll.js?rev=1452844&r1=1452843&r2=1452844&view=diff
==============================================================================
--- 
incubator/bloodhound/trunk/bloodhound_dashboard/bhdashboard/htdocs/js/bloodhound-stickyscroll.js
 (original)
+++ 
incubator/bloodhound/trunk/bloodhound_dashboard/bhdashboard/htdocs/js/bloodhound-stickyscroll.js
 Tue Mar  5 15:14:44 2013
@@ -19,41 +19,40 @@
 
 $(document).ready(function stickyStatus() {
 
-  $(window).scroll(function onScroll() {
-
-    var windowWidth = $(window).width();
-
+  function stickyLogic() {
+    var windowHeight = $(window).height();
+    var headerHeight = $("header").height();
     var docViewTop = $(window).scrollTop();
-    var docViewBottom = docViewTop + $(window).height();
 
+    var headerStickyHeight = $("header #stickyStatus").height();
     var headerTop = $("header").offset().top;
-    var headerBottom = headerTop + $("header").height();
-
-    var statusTop = $("#stickyStatus").offset().top;
-    var statusBottom = statusTop + $("#stickyStatus").height();
-
-    var desktopStickyHeight = $("#stickyStatus").outerHeight();
+    var headerBottom = headerTop + headerHeight - headerStickyHeight;
 
-    if(windowWidth >= 768) {
-      if (docViewTop > headerBottom) {
-        $("#stickyStatus").addClass("sticky");
-        $(".stickyOffset").css("height", desktopStickyHeight + "px");
-      }
-      else {
-        $("#stickyStatus").removeClass("sticky");
-        $(".stickyOffset").css("height", "0px");
-      }
+    var stickyHeight;
+    if(windowHeight >= 768) {
+      headerBottom = 0;
+      $("div#breadcrumb-row div").attr('id','oldstickyStatus');
+      $("div#breadcrumb-row div").removeClass("sticky");
+      $('header').attr('id','stickyStatus');
+      stickyHeight = $("#stickyStatus").outerHeight();
     }
     else {
-      if (docViewTop > headerBottom) {
-        $("#stickyStatus").addClass("sticky");
-        $(".stickyOffset").css("height", mobileStickyHeight + "px");
-      }
-      else {
-        $("#stickyStatus").removeClass("sticky");
-        $(".stickyOffset").css("height", "0px");
-      }
+      $('header').attr('id','oldstickyStatus');
+      $("header").removeClass("sticky");
+      $("div#breadcrumb-row div").attr('id','stickyStatus');
+      stickyHeight = $("#stickyStatus").outerHeight();
     }
-
-  });
+    
+    if (docViewTop > headerBottom) {
+      $("#stickyStatus").addClass("sticky");
+      $(".stickyOffset").css("height", stickyHeight + "px");
+    }
+    else {
+      $("#stickyStatus").removeClass("sticky");
+      $(".stickyOffset").css("height", "0px");
+    }
+    $("#oldstickyStatus").removeClass("sticky");
+  };
+  $(window).scroll(stickyLogic);
+  $(window).resize(stickyLogic);
 });