Making the title stick to the top when scrolled.

hkrishna · hkrishna · commit 2e62e18405d9 · 2012-06-23T18:42:39.000-04:00
diff --git a/javascripts/sidebar.js b/javascripts/sidebar.js
@@ -54,6 +54,17 @@ $(function() {
   // Draw the sidebar
   redraw();
 
+  // sticky header
+  var $title = $('section#main h1');
+  var headOffset = 50;
+  $(window).scroll(function(){
+    if( $(window).scrollTop() > headOffset ) {
+      $title.addClass("fixed_top");
+    } else {
+      $title.removeClass("fixed_top");
+    }
+  });
+
   // Hide tutorials if the user clicks on a facet
   $("nav li").live("click", function(e) {
     target = $(this).data();
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
@@ -201,6 +201,18 @@ section#main {
   padding-bottom:50px;
 }
 
+section#main h1.fixed_top{
+  position:fixed;
+  top:0px;
+  z-index:100;
+  width: 560px;
+  padding: 10px 0;
+  -moz-box-shadow: 0px 5px 10px #FFF;
+  -webkit-box-shadow: 0px 5px 10px #FFF;
+  box-shadow: 0px 5px 10px #FFF;
+  background:#FFF;
+}
+
 small {
   font-size:11px;
 }
