On 3 Mar 2019, 3:23 pm, waltd wrote:
Another way that you could do this using only CSS would be to put the small header underneath (in layer order) the large header, and set the small header’s position to fixed or sticky, and the large header to absolute. That way the large header would scroll away with the rest of the page, leaving the sticky header behind. But that may not fix the snap-back issue you’re describing. It’s also going to be a lot of fiddly work in a responsive layout, since you’re dealing with layers that don’t repel the other content of the page.
This is exactly what I’ve done for the test-2 page I just posted. It seems to work fine for responsive, although I haven’t fine tuned it for the smallest viewports.
I’ve also thought of another way of solving the ‘snap-back’ problem (when you don’t know how to code, you just use a hammer) which is by having a 3rd layer - absolute, which extends off the page at the top. I’d appreciate if you could take a look Walter and tell me if you think it will break with some browsers … it works ok in Safari on my MBPro, iPad Pro 13 and iPhone 6.
I do get an issue where if I ‘accidentally move’ the page with 2 fingers instead of scrolling, the page content moves around sideways and I catch glimpses of the small header. Not sure what to do about this, or if it’s really a problem.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options