The discussion revolves around achieving a smooth scrolling effect for a custom header in Discourse, similar to the one on Ubuntu’s forum. rootsh3ll initiates the conversation by sharing a comparison between Ubuntu’s forum and another Discourse forum with a glitchy top navigation bar.
Stephen points out that the difference in behavior is likely due to the page type (/latest vs. /categories) rather than custom code. However, after rootsh3ll switches to /latest, the issue persists on the other forum.
dax suggests using the Brand Header theme component, and Johani identifies the root cause of the issue: the header’s position changing from absolute to fixed when scrolling past the top of #main-outlet. Johani pushes a fix to address the issue.
codinghorror acknowledges the find and fix, and rootsh3ll expresses gratitude for the support.
Later, Jennifer_Abrams asks whether the fix is applicable regardless of CSS and how to identify custom markup before #main-outlet.
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
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.
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 
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
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
Awesome find and fix! Thanks for bringing this up @rootsh3ll!
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
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!
did you get it fixed?