Hi all,
I came across an interesting feature on the Marc O’Polo homepage where the CTAs are fixed to the bottom of the screen but once they reach their natural position within the page they flip to relative positioning.
I understand this has been created using JS and have even put together a JSFiddle (adapted from another forum’s post about a similar request) which works, except the offset is nailed down and therefore doesn’t account for smaller screens/responsive.
Any thoughts?
Cheers,
Andrew
You can get a similar effect with css only using position:sticky.
I just knocked this up in a few seconds so probably needs refining.
Cool, thanks!
I note there are a couple of exceptions with Edge and Chrome with position: sticky when you’re using tables (see https://caniuse.com/#feat=css-sticky) but other than that it’s definitely a preferred option over using JS for something so simple.
IE11 isn’t supported at all but could just have the element’s position set onload as a fallback I guess…plus IE11 has very low visitor numbers these days anyway, at least on the sites I’m working with.
I have it working on tables fine in in all modern browsers in this old over the top demo
You just have to choose the correct elements to sticky.
The beauty of position:sticky is that it degrades nicely in most cases. The content just scrolls along as usual. Just to be certain you can always put the sticky rules inside an @supports block in the css so that it does no harm.
IE11 is a minor browser these days and in a couple of years there will be no edge either.
Excellent, thanks for your feedback Paul!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.