iScroll - Fixed Th, table Headers

[M SA]

Hi, first of all, this is a great plugin; I'm gonna use it in my webapp, but before, I need some adjusts. I'm using the iscroll from the horizontal scrolling demo. But for enable Vertical scrolling, I have done this, (Add more ul elements and increase the height of the wrapper (The sum of all ul height)).

<div id="wrapper"  style="height:40px;" ><!-- Height should be the sum of all the height from ul elements-->

    <div id="scroller">

    <ul id="thelist1" style="height:20px;">

    <li>Pretty col 1</li>

    <li>Pretty col 2</li>

    <li>Pretty col 3</li>

    </ul> 

    <ul id="thelist2" style="height:20px;">

    <li>Pretty col 1</li>

    <li>Pretty col 2</li>

    <li>Pretty col 3</li>

    </ul> 

    <div/> 

 

It scrolls horizontally and vertically pretty nice. But... what I need is, the first ul list, fixed, I want to scroll the data, but not the first list. Just like this examples (Notice that in the examples are used table tags instead of ul tags ,but at the end is the same)

- http://jcbulanadi.oni.cc/sfht_freezecolumn_sortable_blue.html 

- http://www.massless.org/_tests/grid1/

 

This is more or less what I need, implemented with iscroll; but I need horizontal scroll too.

- http://jsbin.com/iscroll-floating-headers/14 

Any suggestions? Thanks!

[Noah David]

We do that on my companies' site, and what we did was make two tables, one was fixed and the other was an iScroll table. The iScroll table would go UNDER the fixed table, thus giving you the effect you desire.

[M SA]

Thanks for responding but

 

I tried this structure.... the first table still scrolling vertically.... I need it stays fixed on top.

<div id="wrapper"  style="height:40px;" ><!-- Height should be the sum of all the height from ul elements-->

  <div id="scroller">        

      <table style="position:fixed;top:0px;left:0px;">

            <thead>

                <th>a</th>

                <th>b</th>

            </thead>

            <tbody>

                <td>c</td>

                <td>d</td>

            </tbody>

        </table>

        <table>   

            <thead>

    <tr>

    <th>First Name</th>

    <th>Last Name</th>

    <th>Age</th>

    <th>Total</th>

    <th>Discount</th>

    <th>Difference</th>

    <th>Date</th>

                                    <th>Sex</th>

    </tr>

    </thead>

    <tbody>

    <tr>

    <td>Peter</td>

    <td>Parker</td>

    <td>28</td>

    <td>$9.99</td>

    <td>20.9%</td>

    <td>+12.1</td>

    <td>Jul 6, 2006 8:14 AM</td>

                                    <td>Male</td>

    </tr>

    </tbody>

    </table>

       </div>

</div>

[M SA]

I need this event how can I get this working?

    $("#scroller").scroll(function (event) {

        alert("!");

    });

[M SA]

Ok, I just tried this for notice when scrolling, and worked... but, I Still need the first table ''fixed', I've tried change the top css property but it doesnt worked as expected.

    myScroll = new iScroll('wrapper', {

        onScrollMove: function () {   

            console.log('onScrollMove');

            $("# thelist1 ").css("top", CURRENTTOP + DESIRED ); <!-- :( This dont work as I expected-->

        },

        onScrollEnd: function () {

            console.log('onScrollEnd');

        }

    });

[M SA]

There's no solution?!

[M SA]

can you show me some sample code please? thanks for advice.

[M SA]

Nothing here?