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.