Using Joey stack scrolling content, I’m trying to have a logo image that is open on page load but fades out as you scroll down. To do this I have set content to hide between two values.
Basically it works but the first bit of content below the logo (welcome to the Dental care…) jumps up and disappears instead of scrolling out;
kikkdevelopment.co.uk/dcc (home page only)
Any clues welcome. Thanks
Set TopBar to fixed instead of sticky if it is at the top of the page. I suspect that it is the topbar immediately fixing that causes the page content to jump up by the height of the logo.
If not then my next guess would be a timing issue whereby TopBar is sizing its spacer before the banner is in place but try the above first
We need to collectively fix this sticky issue
Part of the problem is that other developers use the word sticky to mean fixed.
Fixed position is clearly when it is fixed at the top and uses position:fixed
Sticky is when it will stick to the top when it gets there (there is even now a CSS position:sticky so our terminology is clearly correct).
If it starts out in the “stuck” position then having it sticky is pointless.
All that said, the problem is only with Foundation sticky in terms of jumping. Chroma, Pin, SlideUp etc etc all addressed the issue a long time ago. Foundation 6 also fixed the problem so when JW Foundation2 is released, it will not be an issue. It remains much more efficient to use fixed though if you can so that the browser is not continually calculating scroll position etc. It is not a big deal but there is no point doing pointless calculations, ever.
Thanks again Andrew. Works well now.