How to finely scroll out custom header?

UX
1

I see the top header of discourse.ubuntu.com and when I scroll down, the extra header smoothly scrolls out.

Unlike other discourse forums like: https://talk.turtlerockstudios.com Notice the glitchy behaviour of the top nav. bar

Can you provide the HTML and CSS code for the Ubuntu’s forum? with smooth transitioning

6 Likes
2

It’s not a like-for-like comparison.

The big difference between those pages is that the TRS page is /latest while ubuntu uses /categories. Latest scrolls infinitely, categories is limited to 20 posts. There will always be a bit of jerkiness when your browser polls the server for more posts.

If you need something from the source you can look directly at the pages, but I’m pretty confident that rather than having some super-secret smooth scrolling code in their pages the reason is the above.

Please don’t tag people directly, particularly when a small amount of research on your part can answer these questions.

3

I just switched ubuntu to /latest and reloaded the page. No glitch seen.
But TRS still shows glitch. It’s surely some code.
I will update this thread when I get it working.

Sure :slight_smile:

4

Why don’t use the appropriate theme component?

You can customize it in another stylesheet, in case.

You can try this one too, where links are inside the header

8 Likes
7

This occurs because the header is docked at the top of #main-outlet while positioned absolutely and then it changes to position: fixed and so it “jumps” to the top of the page once you scroll past the top of #main-outlet.

This is not an issue if you don’t have custom markup added before the main-outlet, but if you do, you get the results you described.

I pushed a small fix to address the issue and the transition will now be like what you see on the Ubuntu community if you add custom markup

https://github.com/discourse/discourse/commit/ac7b05884917c8949ad9690d1e3b63eeb7f6303f

13 Likes
8

Awesome find and fix! Thanks for bringing this up @rootsh3ll!

5 Likes
9

Awesome Johani.
The kind of support Discourse staff gives is unbeatable! It always amazes me how responsive people are here on meta staff.

Thanks a lot man. Will be testing it soon :slight_smile:

10 Likes
17

So is this supposed to be fixed no matter what your CSS is like?

Otherwise what should I delete, because I am having the same issue as OP (using the latest discourse). How do I know what markup is before #main-outlet? You mean before it line-wise in the file?

Thank you!

18

did you get it fixed?