We’re having trouble with a custom Discourse instance running inside a Django revproxy application (https://dev.edemocracia.labhackercd.net/expressao/). In this application we have a global topbar that is always sticked to the top of the page with a non sticked wrapper that has a height of 24px set (in order to “push” the site content). When we scroll this page, the ‘#main’ top offset is then initially different from 0 now, so only after scrolling 24px it will stick by appling the ‘.docked’ class to the body. But since our global topbar is fixed, we’d like to apply the ‘.docked’ class and stick the Discourse header when the ‘#main’ offset is 24px instead of 0, in order to not overlay our bar on top of the header. How should I approach this issue? Can I customize some of Discourse’s JS? Maybe just inject new JS code to override the default behaviour?

Add this to your custom CSS: .d-header { position: fixed !important; top: 24px !important; }

You know what… I guess wrapping your head around an issue a whole day trying to make things work the “proper” way (in this case by making it work only when the .docked class was applied) messes your brain ability to solve problems in the simplest of manners. This surely works.

Can you think of a way to do this which would work without having a fixed-height custom header? We have a 2 line header which will wrap to 4 lines on narrow screens (e.g. mobile). I guess it could use a fixed height dependent on the screen width and a bit of guesswork. (Not perfect as the width of the content varies over time.) It seems that the Discourse code has an oversight here. It calculates the height of the d-header element, but if you do anything in Admin/Customize/Themes/Header, it is inserted above d-header, in a separate non-child element, and that extra height is not considered when scrolling. It seems like the height of a common parent element should be used, or the Customize header should be inserted as a child of d-header. It looks like this recent fix/commit was for something similar, but it doesn’t seem to have affected my site, so it must be something slightly different: https://github.com/discourse/discourse/commit/2fe2c1bfb9918ae1d49aa534027bf825a64bc4aa For anyone who hasn’t seen the problem, this is what happens when you use the Customize/Header option: [with_header] This is what it looks like normally, without a custom header: [without_header]

[图片]Is it possible to change HTML of header and footer and message details on the forum? I added custom header in ember plugin outlet above-site-header. Then using below simple css I am hiding it when scrolling .d-header { top: auto; } .docked .d-header { top: 0; } Try this CSS. I hope it will work for any custom header.

Guys, I am pretty new to editing the CSS and stuff like that so I’m sorry if this question has already been answered. Our forums’ header looks like this with a custom bar: [GIF%20forum] So what we want right here is the global topbar to be gone when scrolling down, and the main topbar stick to the top. We already tried adding the codes above to the CSS but when we do this the main topbar will stick to the top with a wide gap. Is there anyone that can help me out with this?

Stick header in proper scroll position when having a custom fixed topbar on top of it

Product Support

shaundefense (Shaun Defense) 2019 年3 月 14 日 15:35 7

Also interested in a fix for this. Anyone have any luck? I’m having the same issue as Tim

话题		回复	浏览量
After updating Discourse, top header moves down with scrolling Bug	1	650	2020 年12 月 14 日
Elastic scrolling on ipad causes header to unstick from top of window UX tablet	4	1724	2015 年9 月 21 日
How to remove sticky top bar? Product Support	4	2190	2020 年5 月 22 日
Keep Brand Header static instead of scrolling? Development css , brand-header	4	169	2018 年5 月 8 日
Slight CSS bug when using a custom global navigation bar Bug	17	2648	2016 年6 月 4 日

Stick header in proper scroll position when having a custom fixed topbar on top of it

相关话题