滚动时在顶部固定某些类的表行

Question

I have a HTML table made with Javascript. http://jsfiddle.net/T9Bhm/3179/

I want to be able to scroll and keep a certain row at the top (not a header, a row). I have tried this :

 $(window).bind('scroll', function () {
     console.log('menuTop')
     if ($(window).scrollTop() > 10) {
         $('.menuTop').addClass('fixed');
     } else {
         $('.menuTop').removeClass('fixed');
     }
 });

This doesn't seem to work. I wan tthe numbers and letters to stay at the top when on scroll (the ones classed as 'menuTop'). But on scroll they all seem to fold in to one on the left hand side. The 'H' being on top.

Any ideas ?

Answer 1

There's no simple way to do this purely with HTML/CSS. It requires a JavaScript solution. The basic methodology would be to clone the header cells using <div> or other block elements, and position the clones absolutely or fixed.

There are a number of plugins out there that can do this work for you. If you roll your own, you should try to write some code and post here only when you get stuck with a specific, reproducible error.

Answer 2

I think you something like this, if yes then you need to add class in 10th tr .

.fixed{
    display: table;
    left: 0;
    position: fixed;
    top: 0;
    width: 824px;
}

jsfiddle ink

Hope it will helps you.

Answer 3

Need to move your fixed to the row, instead of the cells and you need to have top and left style attributes set instead of letting it determine because each browser will set fixed items with user-agent defaults.

As well, a table width expands from content filling the cells, the cells on that row will not stay the same width unless you detect the "column-sibling" from calculated row-cell widths with JS and set each row-cell width in that row.

Answer 4

I have managed to solve it with the help of all the other answers.

Updated fiddle : http://jsfiddle.net/T9Bhm/3183/

With this though, as mention by 'Twintails', I have to explicitly set the columns width, which is a pain if I'm honest.

The way I did it was instead of applying the fixed position to each cell in the row, I gave the class to the whole row. Then set these attributes in the css :

.fixed{    
     display: table;
    left: 0;
    position: fixed;
    top: 0;
    width: 95.72%;

}

Another thing that should never be done, is set the width in the css the way I have done here. However, it helps me in my situation.

Hopefully this helps someone else :)