- Create your columns in Fustion Builder.
- Select the column you want to be sticky.
- Add
floating-toc
to the CSS Class setting for the column you selected. - Add the following CSS to the page's CSS editor.
/** Add this to your page's CSS */
.floating-toc {
position: sticky;
top: 171px; /* Offset for the header. Adjust as needed. */
}
See the screengrabs in the comment below this gist.
Hello @zoudano,
I thought it was the nested columns at first. My mistake. Your nested columns should be fine.
So, there's a parent div with
id="boxed-wrapper"
way high up in the DOM that breaks all elements withposition: sticky
on the page.The hack to fix this is to unset the div's overflow style. Here's the JS that will do that and allow your sticky column to work.
To do a quick test, copy/paste this code into your browser's console for that page. Then scroll up/down.
After testing, you can add this JS to your page's footer area using proper enqueue techniques in your child functions.php or the Insert Headers and Footers plugin.
Let me know how this goes.