Floating Table header help Stop Scroll to Right

Question

So. To create a header for a table I cloned the table and have hidden everything but the header. So when you scroll below the header the clone will follow your screen down. My problem is that the page has a large table that need the screen to scroll right to see all the data, but the table header scrolls. I've tried just setting that to fixed but it messes up the formatting of the table header.

Here is my code for the creating of the header (I used another question from this site to get me this far. And i left my commented out portions so you can maybe follow what I've tried)

TLDR: Made a table header clone for use below threshold. Scrolls right with screen, do not want.

JQuery/Javascript

  function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;

    if (scroll>anchor_top && scroll<anchor_bottom) {
        clone_table = $("#clone");
        if(clone_table.length == 0){
            clone_table = $("#maintable").clone(true);
            clone_table.css({position:'fixed','pointer-events': 'none',top:0});
            clone_table.width($("#maintable").width());
            clone_table.attr('id', 'clone');
            $("#table-container").append(clone_table);
            $("#clone").css({visibility:'hidden'});
            $("#clone thead").css({visibility:'visible'});
        }
        if($(window).scrollLeft() > 0){
            var scroll_position = $(window).scrollLeft();
            //var object_position = ($(window).width()- $('#clone').width()) * (scroll_position/($(document).width() - $(window).width()));
            var object_position = $("#clone").offset().left;
            $("#clone").css({'right': (scroll_position + object_position)});
        }
    } else {
        $("#clone").remove();
    }

}

Jquery call

$(window).scroll(moveScroll);

HTML

div id="table-container">
<table width="100%" id="maintable" class='tablesorter'>
<thead>
    </thead>
<tbody>
    ...
    </tbody>
 </table>
 <table width="100%" id="bottom_anchor" class='tablesorter'></table>
 </div>

The first table here is where all my data shown is. The second is my hader that scrolls with the screen.

EDIT: Changed the jquery code so now im still having the same problem,but I feel like I might be a little closer. Thanks for the help in advance

Seems to be a duplicate of this one: http://stackoverflow.com/questions/17584702/how-to-add-a-scrollbar-to-an-html5-table — slu, Feb 11 '14 at 22:32
I dont watn a scroll bar. I created the table and everything scrolls fine, its just the header to follow the elements down the page scrolls as well. So when you want to see more elements to the right, the header bar stays fixed to the screen so the label isnt right for those elements. — crychair, Feb 12 '14 at 13:20

score 0 · Accepted Answer · answered Feb 13 '14 at 15:37

WOOT!

function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;

    if (scroll>anchor_top && scroll<anchor_bottom) {
        clone_table = $("#clone");
        if(clone_table.length == 0){
            clone_table = $("#maintable").clone(true);
            clone_table.css({position:'fixed','pointer-events': 'none',top:0});
            clone_table.width($("#maintable").width());
            clone_table.attr('id', 'clone');
            $("#table-container").append(clone_table);
            $("#clone").css({visibility:'hidden'});
            $("#clone thead").css({visibility:'visible'});
        }
        if($(window).scrollLeft() > 0){
            var scroll_position = $(window).scrollLeft();
            var object_position = $("#maintable").offset().left;
            $("#clone").css({'left': (object_position - scroll_position)});
        } else if($(window).scrollLeft() == 0){
            $("#clone").css({'left': $("#maintable").offset().left});
        }
    } else {
        $("#clone").remove();
    }

}

This code works. Took me hours to notice that i wasn't setting up the left position of the clone correctly.

Floating Table header help Stop Scroll to Right

1 Answers1