Sticky Table Row

Let’s say there is a lengthy table full of data (like the Spoon discography on the right) and that the user would like to run commands on certain rows in the table. Normally, even if only a few rows at the top of the page are checked, the user would still have to scroll all the way down to find the available commands. Even worse, if it is their first time viewing the page, they wouldn’t even have a clue which commands exist!

The technique used in this page takes the row of commands lurking at the bottom of the table and “sticks” it to the bottom of your browser window, so that the commands are always visible. The best part is at the bottom, so move on down.

Once you scroll past where the command bar would be normally, it unsticks and snaps back into place.

This is all achieved with some simple JavaScript and CSS (viewable in these JS and CSS files), and the only HTML required to enable this functionality is to give the table row two divs with a special class on each.

Thanks to a position: fixed workaround technique, this even works in IE6!

Questions or comments? I would love to hear them. Leave a comment on the blog post or send me an email.

  Name Artist Album Track Year
Don't Make Me a Target Spoon Ga Ga Ga Ga Ga 1 2007
The Ghost of You Lingers Spoon Ga Ga Ga Ga Ga 2 2007
You Got Yr Cherry Bomb Spoon Ga Ga Ga Ga Ga 3 2007
Don't You Evah Spoon Ga Ga Ga Ga Ga 4 2007
Rhthm and Soul Spoon Ga Ga Ga Ga Ga 5 2007
Eddie's Ragga Spoon Ga Ga Ga Ga Ga 6 2007
The Underdog Spoon Ga Ga Ga Ga Ga 7 2007
My Little Japanese Cigarette Case Spoon Ga Ga Ga Ga Ga 8 2007
Finer Feelings Spoon Ga Ga Ga Ga Ga 9 2007
Black Like Me Spoon Ga Ga Ga Ga Ga 10 2007
The Beast and Dragon, Adored Spoon Gimme Fiction 1 2005
The Two Sides of Monsieur Valentine Spoon Gimme Fiction 2 2005
I Turn My Camera On Spoon Gimme Fiction 3 2005
My Mathematical Mind Spoon Gimme Fiction 4 2005
The Delicate Place Spoon Gimme Fiction 5 2005
Sister Jack Spoon Gimme Fiction 6 2005
I Summon You Spoon Gimme Fiction 7 2005
The Infinite Pet Spoon Gimme Fiction 8 2005
Was It You? Spoon Gimme Fiction 9 2005
They Never Got You Spoon Gimme Fiction 10 2005
Merchants of Soul Spoon Gimme Fiction 11 2005
Small Stakes Spoon Kill the Moonlight 1 2002
The Way We Get By Spoon Kill the Moonlight 2 2002
Something to Look Forward To Spoon Kill the Moonlight 3 2002
Stay Don't Go Spoon Kill the Moonlight 4 2002
Jonathon Fisk Spoon Kill the Moonlight 5 2002
Paper Tiger Spoon Kill the Moonlight 6 2002
Someone Something Spoon Kill the Moonlight 7 2002
Don't Let It Get You Down Spoon Kill the Moonlight 8 2002
All the Pretty Girls Go to the City Spoon Kill the Moonlight 9 2002
You Gotta Feel It Spoon Kill the Moonlight 10 2002
Back to the Life Spoon Kill the Moonlight 11 2002
Vittorio E Spoon Kill the Moonlight 12 2002
Everything Hits at Once Spoon Girls Can Tell 1 2001
Believing Is Art Spoon Girls Can Tell 2 2001
Me and the Bean Spoon Girls Can Tell 3 2001
Lines in the Suit Spoon Girls Can Tell 4 2001
The Fitted Shirt Spoon Girls Can Tell 5 2001
Anything You Want Spoon Girls Can Tell 6 2001
Take a Walk Spoon Girls Can Tell 7 2001
1020 AM Spoon Girls Can Tell 8 2001
Take the Fifth Spoon Girls Can Tell 9 2001
This Book is a Movie Spoon Girls Can Tell 10 2001
Chicago at Night Spoon Girls Can Tell 11 2001
Change My Life Spoon Love Ways EP 1 2000
I Didn't Come Here to Die Spoon Love Ways EP 2 2000
Jealousy Spoon Love Ways EP 3 2000
The Figures of Art Spoon Love Ways EP 4 2000
Chips and Dip Spoon Love Ways EP 5 2000
Utilitarian Spoon A Series of Sneaks 1 1998
The Minor Tough Spoon A Series of Sneaks 2 1998
The Guestlist/The Execution Spoon A Series of Sneaks 3 1998
Reservations Spoon A Series of Sneaks 4 1998
30 Gallon Tank Spoon A Series of Sneaks 5 1998
Car Radio Spoon A Series of Sneaks 6 1998
Metal Detektor Spoon A Series of Sneaks 7 1998
June's Foreign Spell Spoon A Series of Sneaks 8 1998
Chloroform Spoon A Series of Sneaks 9 1998
Metal School Spoon A Series of Sneaks 10 1998
Staring at the Board Spoon A Series of Sneaks 11 1998
No You're Not Spoon A Series of Sneaks 12 1998
Quincy Punk Episode Spoon A Series of Sneaks 13 1998
Advance Cassette Spoon A Series of Sneaks 14 1998
Mountain to Sound Spoon Soft Effects EP 1 1997
Waiting for the Kid to Come Out Spoon Soft Effects EP 2 1997
I Could See the Dude Spoon Soft Effects EP 3 1997
Get Out the State Spoon Soft Effects EP 4 1997
Loss Leaders Spoon Soft Effects EP 5 1997
Don't Buy the Realistic Spoon Telephono 1 1996
Not Turning Off Spoon Telephono 2 1996
All the Negatives Have Been Destroyed Spoon Telephono 3 1996
Cvantez Spoon Telephono 4 1996
Nefarious Spoon Telephono 5 1996
Claws Tracking Spoon Telephono 6 1996
Dismember Spoon Telephono 7 1996
Idiot Driver Spoon Telephono 8 1996
Towner Spoon Telephono 9 1996
Wanted to Be Your Spoon Telephono 10 1996
Theme to Wendel Stivers Spoon Telephono 11 1996
Primary Spoon Telephono 12 1996
The Government Darling Spoon Telephono 13 1996
Plastic Mylar Spoon Telephono 14 1996

All code within is under Creative Commons license and free for use, just give credit where credit is due. Icons used in this example are from the Silk Icons set.