New feature: "sticky" headers in site tables

Discussion in 'Site Announcements' started by sothis, Apr 15, 2013.

  1. sothis

    sothis Overlord Staff Member

    Posted by sothis on Apr 15, 2013
    We just added a new bit of javascript that keeps table headers "sticky" as you scroll down the page.

    For example:

    Notice that when you scroll down the page, the headers stay visible.

    This feature in theory will be helpful because it's hard to remember what's in the table cells once the header is off screen. The header has been added in all tables I could think of where it would be relevant, including your personal list pages, the 'popular [anime/manga/etc]' pages, the recent recs and reviews, etc.

    If you can think of a table on the site that should have this feature and it's not currently set up, please let me know as I can look into it!

    Also, you'll notice there's a few things (like the love/hate buttons, and the 'i agree' button when browsing recent recs) which overlap on top of the sticky header. This is known but I don't think it's important enough to try to fix.

    Hope you enjoy the feature! As always, if you appreciate this or other features please consider donating, as right now we're especially in need of funding to try to fix the recent server woes.
  2. Madoka

    Madoka New Member

    Posted by Madoka on Apr 15, 2013
    Yay at least some people think things like this ^^
    seriously a lot of websites should implement things like this, it might be small but it can make life so much more easier for people.
    Thanks :)
  3. VivisQueen

    VivisQueen Active Member

    Posted by VivisQueen on Apr 15, 2013
    Wow. All these amazing updates! Well done, team AP!
  4. Barry

    Barry New Member

    Posted by Barry on Apr 15, 2013

    The table where you can browse by year/season is the only one I can think of.
  5. sothis

    sothis Overlord Staff Member

    Posted by sothis on Apr 15, 2013
    Ack, did that one not get updated?
  6. sothis

    sothis Overlord Staff Member

    Posted by sothis on Apr 15, 2013
    you're right, i missed that one - it's now updated (that page was actually the motivation for adding this feature in the first place so i'm surprised i missed it, lol)
  7. Kari5

    Kari5 Active Member

    Posted by Kari5 on Apr 15, 2013
  8. Tyranid5

    Tyranid5 New Member

    Posted by Tyranid5 on Apr 15, 2013
    The import tables didn't benefit from this. May not be necessary on the detailed one. List of imports could work decently with this feature.

    User Community - Anime-Planet
    ^This link will work for all. This is the import table. I'm referring to.

    The table for detailed info on imports.....
    User Community - Anime-Planet
    this link might work for sothis, not for others at all.

    Not a must add, but it's the only other table i use that didn't get this feature added. So yeah.
  9. sothis

    sothis Overlord Staff Member

    Posted by sothis on Apr 16, 2013
    just had a look at that one, i should in theory be able to add it but would like to do some testing first as that type of table is mostly used in admin pages (that normal users dont see). it's used in a whole lot of them so i'd like to make sure the admin section works as-expected with the headers

    on my way to work right now but will check this out tonight once i return
  10. Drahken

    Drahken Cross-eyed Cyclops

    Posted by Drahken on Nov 17, 2013
    While this feature is nice in theory, I find the current implementation far more annoying than useful. The problem is that the transition is not smooth. When the header is in it's normal place everything goes smoothly and once it detaches and sticks to the table it runs smoothly, but trying to scroll the page stops & then jumps when it hits the actual moment of detaching.
    I've seen a number of other sites do a similar setup where an element stays in it's normal place on the page until you scroll beyond that point and then it sticks to a given point on the user's viewing area. However, the other ones I've seen all did so smoothly. I have no idea what they do differently. (Unfortunately I don't have any specific sites to link to as examples, though I'll post them here if I encounter any again.)

    edit: I found this:
    If you click the demo link & scroll it, you'll see that the header transition from static to fixed seemlessly & unnoticably.

    edit 2: Here's an example of a seamless transition:
    Last edited: Nov 30, 2013

Share This Page