-
AuthorPosts
-
August 5, 2019 at 4:21 pm #1124789
I have looked at everything to create a sticky column with enfold and can’t figure it out. None of the “solutions” i’ve seen seem to work. Does anyone have a legit solution to this?
Thanks,
August 5, 2019 at 8:50 pm #1124882This method is based on the flex-box modell and the “stickyness” is allways in relation to its parent container.
See testpage here: https://webers-testseite.de/sticky-elements/
So see first if this fits your needs – otherwise you don’t need to read further.well it will be better to see any live page to give better advice – but here we go.
a good method will be position sticky ( only Opera mini and IE11 do not support position: sticky )it is important that on this method the default values for these elements are changed to overflow : visible:
.responsive body#top { overflow-x: visible; } #wrap_all { overflow: visible; }
if you only have that on some pages it might be usefull to limit it to only these pages by f.e.:
.responsive body#top.page-id-123 { overflow-x: visible; } .page-id-123 #wrap_all { overflow: visible; }
the sticky elements ( columns f.e.) stick if they have a given distance to top – and will scroll when the parent container scrolls out of the scene.
f.e. you can have on that column a menu etc.A useful setup would be to have a color-section as surrounding container – give to that color-section a custom class:
sticky-parent
Place your columns to this color-section – the columns you like to be sticky give them a custom class:
sticky-elementon responsive case you don’t need that – because columns then stand among each other. – so we can place the css in a media query:
@media only screen and (min-width: 767px){ .sticky-parent .entry-content-wrapper { display: flex; justify-content: space-between; align-items: flex-start; } .sticky-parent .entry-content-wrapper:before, .sticky-parent .entry-content-wrapper:after { display:none } .sticky-element { position: -webkit-sticky !important; position: sticky !important; top: 140px; align-self: flex-start; min-width: 30%; } }
you can play with top position and min-width here – because even if the columns are 1/3 the flex-model rules here the width !
August 5, 2019 at 8:57 pm #1124890by the way: it is here with more options on parent container: https://alligator.io/css/position-sticky/
and if you like you can have that on sticky sidebar too. See here: https://webers-testseite.de/buttons/
August 6, 2019 at 8:42 am #1125001Hi,
Thanks for sharing and for helping out @guenni007, did you try that out and did you have any luck with it @adamghart?
Best regards,
RikardJune 23, 2020 at 11:44 pm #1224964I know this is kind of an old post but I wanted to validate @guenni007 solution.
Thanks a lot!June 24, 2020 at 6:08 am #1225020Hey les_360,
Perfect! Thanks for sharing!
Best regards,
Jordan Shannon -
AuthorPosts
- You must be logged in to reply to this topic.