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 = '
';
+ $("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 = $('')
.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();
+ }
+ });
});
},