Sticky table columns

Discussion in 'Javascript' started by Cruelemort, May 2, 2007.

  1. Cruelemort

    Cruelemort Guest


    I have a requirement to build a div in a page that contains a table of
    plane details, and one of the columns (on the left - tail number)
    needs to be sticky on the horizontal axis but not on the vertical axis
    (i.e. when scrolling right the tail numbers need to stay visible on
    the left hand side, but when scrolling down the tail numbers need to
    scroll to keep up with the rest of the plane details).

    I have been looking at various ways of doing this but currently to no
    avail, the idea that looks most promising is to split it into two
    tables and set them both to have scroll bars, the problem with this
    idea was that both the tables need to be scrolled by the same amount
    vertically, i could get the position of one table using the offsetTop
    property but could not find a way of setting the offsetTop property
    for the other table so they stay aligned. The other issue with this is
    that it would be using the onscroll property which does not seem to
    show any distinction between horizontal and vertical scrolls....

    Any ideas of how this could be done would be appreciated.

    Many thanks.

    Cruelemort, May 2, 2007
    1. Advertisements

  2. Cruelemort

    Cruelemort Guest

    Ok bit of an update since posting (typical i find some of the solution
    just after posting) -

    I have found that the scrollTop and scrollLeft properties can be used
    and set to scroll windows certain amounts (so can set the scrollTop
    value of the left hand table when scrolling the right hand table).
    This just leaves me with two problems, the first is the recursive
    scroll call - making a scroll in an onscroll method call will call the
    onscroll method again, and so on, and the second is telling the
    difference between a horizontal and vertical scroll (this could be
    solved with some hack which includes storing the current scrollLeft
    and scrollTop property and testing the new ones in the onscroll method
    to see if the vertical or horizontal has changed, but i am hoping
    there is some better way of doing this)

    Many thanks.
    Cruelemort, May 2, 2007
    1. Advertisements

  3. Cruelemort

    Ivo Guest

    For an example that uses only CSS to achieve a sticky column, and, well, two
    tables nested in a third, see
    There is no Javascript in sight!
    It does not work for long tables that need to scroll vertically on a
    stationary page, but perhaps this will give you some ideas.
    Have you tried this? Usually onevent functions are only called when the
    event is triggered for real, not when it 's done through script.
    Whenever the event is called, you set the correct X and Y amounts,
    regardless of whether they have changed or not. I don't see a problem.

    Ivo, May 2, 2007
  4. Cruelemort

    Cruelemort Guest

    Thanks Ivo, i finally fixed the problem, created a left and right div
    each with a table in, set the overflow value to hidden for the left
    one and scroll for the right one, then set a javascript method for the
    right div onscroll method, in this method i set the scrollTop value of
    the left div to the scrollTop value of the right div.

    As per usualy fairly straight forward solution, just a case of knowign
    all the properties and how they can be used.


    Cruelemort, May 3, 2007
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.