Sticky avatars: posts avatars following scroll

:warning: This is now an official feature shipped with Discourse, the theme component repository is archived, you should delete it or it will cause malfunctions :warning:

If for whatever reason you want to disable the sticky avatars, there is currently a workaround using CSS:

.topic-post.sticky-avatar {
  .topic-avatar {
    position: relative !important;
    top: unset !important; /* May be needed in some cases */
  }
}
32 Likes

Hi, it would be nice to have a mobile solution.

This works great in desktop and I understand that space issues make it hard to directly translate it to mobile, but maybe a small avatar icon just below the main navbar? (I know, not very ux-friendly)

3 Likes

Our current thinking is that this particular desktop behavior isn’t a good tradeoff on mobile.

2 Likes

Sticky avatars is now an official feature of Discourse :tada:

You can check the commit:

I’m going to edit the OP to reflect that.

11 Likes

Good, so we can remove this theme component now? Thank you.

3 Likes

There’s an inconsistency in the behavior as the avatars on short posts don’t stick when moving down, but they do stick when moving up - see video below.

Also, I’d personally prefer the sticky behavior on short posts too - I find the current ‘only on long posts’ a bit confusing. Perhaps a setting to control the minimum length of a post to enable this behavior would be helpful so everyone can tune it to their own preferences?

3 Likes

Yes that’s expected behaviour, after long time living with it we considered it was the best tradeoff utility/visual noise. The idea being that on short posts when you go down, you know who posted this, but when going up the post content appears before the avatar so it has some value even for small posts.

I would suggest to live with it a little bit please. We have no plans for a site setting for this ATM.

4 Likes

Yes remove the theme component please, it will cause issues if you have both.

I updated the OP to make this clear. Thanks :+1:

4 Likes

I spent a bit of time to find the solution by myself the last weekend, but it was here all along :sweat_smile:

But in my forum, I needed to add top: unset because of some issue on scrolling. So for some users, it might be helpful to use this:

.topic-post.sticky-avatar {
  .topic-avatar {
    position: relative !important;
    top: unset  !important;
  }
}
3 Likes

Thanks, I just edited the OP :slight_smile:

1 Like