Confluence Cloud CSS Position Fixed not working

Question

Hi Guys,

New to Confluence Could and trying to set an expandable floating TOC which remains in a fixed position using the Style Macro.

position: fixed; Doesn't seem to work at all and Neither float or Position fixed seem to work when I run them together.

Please see below:

Sebastian Riera · Answer

Same issue here. My company just migrated to Confluence Cloud.

"""Confluence cloud does not offer the ability to use custom CSS or javascript. Confluence Server, on the other hand, does offer the ability to use CSS and Javascript.

"""

I'm guessing that means I'm SOL? No way of getting floating/fixed TOC in confluence cloud (outside of getting an extension/add-on)?

Stephen Sifers · Answer

Hello Anthony and welcome to the Community.

To ensure we discussing the correct product, Confluence cloud does not offer the ability to use custom CSS or javascript. Confluence Server, on the other hand, does offer the ability to use CSS and Javascript.

If you’re wanting to create a TOC-macro that floats while having a fixed position then I would recommend a post I responded to earlier this year. Here is the context of that post pertaining to how you may float the TOC-Macro:

I sampled the solution provided and tested on Confluence 6.14 and found the following worked:
(Place this under Space Tools > Look and Feel > Stylesheet)

.toc-macro {
float: right;
position: fixed;
width: 250px;
right: 0px;
top: 170px;
background: rgba(229, 232, 232, 0.80);
border: 1px solid #0096d6;
padding: 5px;
}

Along with a screenshot of how it looks:

Source post: Highlighting current toc item (header) while scrolling

Please let us know if this helps with your requirement to float the TOC-Macro with a fixed position.

Regards,
Stephen Sifers