How to Create a Floating Column Using CSS position: sticky in Avada

floating-column-avada-README.md

Usage

1. Create your columns in Fustion Builder.
2. Select the column you want to be sticky.
3. Add floating-toc to the CSS Class setting for the column you selected.
4. 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.

---

References

How to add CSS to WordPress

Live demo on CodePen

CSS position on MDN

---

Screengrabs

Create your columns

Add your CSS class name to the sticky column

Add your CSS for the sticky column

Screencast Demo Running in Avada

Open the GIF and reload to view the demo.

not work for me!

same it is not working for me, maybe because others elements are sticky in my page like the header ?

Hi @cesabas and @zoudano,

I'd need to see your pages to see why this isn't working for you.

Cheers,

Mark

Oh thanks here is the page and some screenshot eEvents | Walking With Energy | | | | | | | | | | | eEvents | Walking With Energy EVENTS AND ONLINE SCREENINGS To fulfil its aim of boosting people’s understanding of energy systems, Walking wi... | | | I would like while we scroll down to see all the events (column at right) the other one with the title Events and online screenings remain stable, sticky. On Sunday, February 21, 2021, 1:29:15 AM GMT+1, mark l chaves <notifications@github.com> wrote: @marklchaves commented on this gist. Hi @cesabas and @zoudano, I'd need to see your pages to see why this isn't working for you. Cheers, Mark — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Hi @zoudano,

I don't see a link to your page or any screen captures. Sorry if I missed them.

Thanks!

oh its bizarrrr
voilà :
https://walkingwithenergy.today/eevents/

Thanks for your help

I have also paste the same code in the css and its working for me but I'm getting problem with the text length. left column has 20-30 points but after pasting this code its showing only 10 points and im not able to scroll the content.

I want to make the column sticky but the content inside this column must be scrollable here is the link and some screenshots- https://patseerdvlpmnt.wpengine.com/quick-field-reference-manual/

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 with position: 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.

(function () {
  let element = document.getElementById("boxed-wrapper");
  if (!element) return;
  element.style.overflow = 'unset'; /* To fix any position: sticky further down the DOM. */
})();

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.

Hi @twinklepandagre,

The quick fix is to add max-height and overflow-y to your sticky element. The updated CSS for your page would look like this.

.floating-toc {
    position: sticky;
    top: 100px;
    overflow-y: scroll;
    max-height: 650px; /* Tweak this to your liking. */
}

thanks its working in the browser. Then I try with this plugin (see below) and unfortunetly it is not working, later today because I am not confortable with modifying the php function (even in the child php !) I  I will give a try and tell you about it. Thanks   On Saturday, March 6, 2021, 4:20:40 AM GMT+1, mark l chaves <notifications@github.com> wrote: @marklchaves commented on this gist. Hello @zoudano, I thought it was the use of nested columns at first. My mistake. Your nested columns shouldn't be the issue. So, there's a parent div with id="boxed-wrapper" way high up in the DOM that breaks all elements with position: sticky on the page. The hack to fix this is by upsetting the div's overflow style. Here's the JS that will do that and allow your sticky column to work. (function () { let element = document.getElementById("boxed-wrapper"); if (!element) return; element.style.overflow = 'unset'; /* To fix any position: sticky further down the DOM. */ })(); 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. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Hi Mark, too difficult for me ! I try few plugin to insert this code and nothing happen. I dont understand this morning, I try as you suggest first on my browser and It was working. Now I try again and nothing happen...

Can you make a screenshot of the eevent page showing it's working (the larger column (width) should stay fixed while we scroll down the longer column) So I will ask a developer to execute this script for me because I dont understand what I am doing

Thank a lot for your help

Hello @zoudano,

I just published a complete how-to article complete with code and screen captures.

How to Unset CSS Overflow Using JavaScript when Sticky Elements Stop Working

Hopefully, this will help you. Let me know if I missed anything ;-)

Thanks!

Yes now it is working : first because I put the right url where this code should fonction. And second by verifying the css, I probably yesterday delete it from my custom css... It work well, the lesson was great, I learn a little bit about code.Thanks to share your kwowledge. Maybe I can hire you to do help me doing other things I can't achieve with plugin. I use modern event calendar but I am not satisfy by their design, I try few plugins to manage events but none of them let me free to achieve simple thing. I modify the original css  to make this page look lik eI wanted to.  But there is fews things I can't do. May I talk to you in private and is it allowed in this forum ?Thank for replying On Saturday, March 6, 2021, 11:18:27 PM GMT+1, mark l chaves <notifications@github.com> wrote: @marklchaves commented on this gist. Hello @zoudano, I just published a complete how-to article complete with code and screen captures. How to Unset CSS Overflow Using JavaScript when Sticky Elements Stop Working Hopefully, this will help you. Let me know if I missed anything ;-) Thanks! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Hello @zoudano,

Excellent! I'm glad it's working now :-)

Sure, I'd like to learn more about your projects to see how I can help.

Can you please send me a message via the contact form on my website? The link to my website is on my profile @marklchaves.

Have a great weekend :-)

Mark

Hi, That sollution does not work with me @marklchaves Could you please take a look at my code? Here is the test page: https://rekinfinansow.pl/rekin-finansow-bije-rekordy-popularnosci/

Hey @Wordpresslover,

Sorry for the delay. I just visited that page. I can see a sticky column on the right-hand side. It seems to work fine for me.

Let me know if you have any questions :-)

Thanks!

The class "position-sticky" with the information above worked as soon as I changed the parent div #boxed-wrapper from overflow:hidden to overflow:visible.

Hey @jolution,

Excellent! Thanks for sharing that with everybody :-)

Hello
I have the same problem. I installed the Avada theme and would like to add the sticky position to a column. I've tried all of the above solutions but none of them work.

The left graphic should stay when you scroll down.

You can see all the settings of the container and the column on the print screen.

What am I doing wrong?

Thank you very much for your feedback

@Paeddy85 no such built=in option in Avada. Avada has only sticky containers. For me Mark's css works:

1. add css to you specific page or globally if you use it in many places.

/** Add this to your page's CSS /
.floating-toc {
position: sticky;
top: 171px; / Offset for the header. Adjust as needed. */
}

2. just add a class .floating-toc to your column and it should work.
3. Report to Avada the need of a sticky column feature.

@Wordpresslover Thanks for your answer. I've already tried this, but it doesn't work. What about the container settings are they right?

Angebot.Uberbauung.Bomus.-.Google.Chrome.2021-11-24.08-27-21.mp4

@Paeddy85 That's perrfectly okey wht you did. In your case an extra custom work is necessary though. If you want me to help you please contact me: https://companyromania.com/contact-us/

I will need a login to your test site to solve it.