From 5bdd5d72da8af246db3adb597ea153efba333a9b Mon Sep 17 00:00:00 2001
From: jelhan <jeldrik@systemli.org>
Date: Sat, 25 Oct 2014 22:39:10 +0200
Subject: [PATCH] Show top scrollbar only when table header is fixed

---
 app/views/poll.js | 37 ++++++++++++++++++++++++++++++++-----
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/app/views/poll.js b/app/views/poll.js
index 22b9c9f..1b2bb11 100644
--- a/app/views/poll.js
+++ b/app/views/poll.js
@@ -15,7 +15,19 @@ export default Ember.View.extend(Em.I18n.TranslateableProperties, {
   didInsertElement : function(){
     this._super();
     Ember.run.scheduleOnce('afterRender', this, function(){
-      $('.user-selections-table').floatThead({});
+      var getScrollBarHeight = function(){
+        var wide_scroll_html = '<div id="wide_scroll_div_one" style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;"><div id="wide_scroll_div_two" style="height:100%;width:100px"></div></div>'; 
+        $("body").append(wide_scroll_html); // Append our div and add the hmtl to your document for calculations
+        var scroll_w1 = $("#wide_scroll_div_one").height(); // Getting the width of the surrounding(parent) div - we already know it is 50px since we styled it but just to make sure.
+        var scroll_w2 = $("#wide_scroll_div_two").innerHeight(); // Find the inner width of the inner(child) div.
+        var scroll_bar_width = scroll_w1 - scroll_w2; // subtract the difference
+        $("#wide_scroll_div_one").remove(); // remove the html from your document
+        return scroll_bar_width;
+      };
+      
+      $('.user-selections-table').floatThead({
+        'scrollingTop': getScrollBarHeight()
+      });
       
       /*
        * scrollbar on top of table
@@ -25,11 +37,13 @@ export default Ember.View.extend(Em.I18n.TranslateableProperties, {
               .css('height', '1px');
       var topScrollbarOuter = $('<div></div>')
               .addClass('top-scrollbar')
-              .css('width', '100%' )
+              .css('width', $('.table-scroll').width() )
               .css('overflow-x', 'scroll')
-              .css('overflow-y', 'hidden');
-      $('.table-scroll').before(
-              topScrollbarOuter.append(topScrollbarInner)
+              .css('overflow-y', 'hidden')
+              .css('position', 'fixed')
+              .css('top', 0);
+      $('.table-scroll').prepend(
+        topScrollbarOuter.append(topScrollbarInner).hide()
       );
       
       $('.table-scroll').scroll(function(){
@@ -38,6 +52,19 @@ export default Ember.View.extend(Em.I18n.TranslateableProperties, {
       $('.top-scrollbar').scroll(function(){
         $('.table-scroll').scrollLeft( $('.top-scrollbar').scrollLeft() );
       });
+      /*
+       * show scrollbar only, if header is fixed
+       */
+      $(window).scroll(function(){
+        var windowTop = $(window).scrollTop(),
+            tableTop = $('.table-scroll table').offset().top;
+        if( windowTop >= tableTop - getScrollBarHeight() ) {
+          $('.top-scrollbar').show();
+        }
+        else {
+          $('.top-scrollbar').hide();
+        }
+      });
     });
   },