Fixed header bug (Karuna)

Hi!

Just wanna report what I believe is a (tiny) bug in the Karuna theme.

It’s about var stuckHeader = $( '.sticky-wrapper.sticking' ); and var stickyHeaderHeight = stuckHeader.outerHeight(); in functions.js, really.

On page load, there’s no .sticking class on the .sticky-wrapper div. As such, stickyHeaderHeight ends up being null. (Can be seen writing stickyHeaderHeight to the console.)

As a result, no padding-top is added to body on scroll, and the page kind of ‘jumps up’. This is noticeable especially when the header image is not set. (Headings — or the page-wide header widget, if in use — will suddenly disappear behind the fixed header on scroll, making them a bit harder to read.)

A quick fix would be to be to hard-code a (large enough) value (in px or ems) into the JavaScript file.

Another, and I believe cleaner (or at least less jerky in e.g. Firefox) fix I’ve used (at https://www.farma-service.be/, e.g.), is to assign position: static to the entire header (through an extra wrapper div) and a hard-coded offset to body. (Upon scroll, the .sticky-wrapper div will sit ‘on top’ of the (now hidden) top-bar. No need to hide it or add padding to body. You would still need to know the (almost) exact final sticking header height, though.

• This topic was modified 7 years, 4 months ago by Jan Boddez.
• This topic was modified 7 years, 4 months ago by Jan Boddez. Reason: Typos