Floating table of contents without addons

[stringsonfire]

Hi

Is it possible to add a floating table of contents without any additional addons in Confluence 6.13.4 Datacentre? The HTML Macro is available, but as we're using Datacentre it's not feasible to add any additional styling addons like "Content Formatting" for this.

I'd like to use the page layout "Two column section with left-sidebar" to hold the TOC, and make it so that when scrolling down, once you reach the bottom of the TOC, the TOC doesn't continue to scroll up with the rest of the page, so it's always accessible.

Other solutions on here are either outdated or rely on addons that we can't use.

Thanks

[Flummiboy]

Hi, I found an answer that you can use even if are not an admin, or you do not have the right to add CSS into the system.

1. insert the TOC macro
2. Set the CSS-class input to: toc-float
3. insert a HTML macro after the TOC
4. Put the following html in:

5. <style>
   .toc-float {
       top: 100px;
       position: fixed;
       border: 1px solid black;
       padding: 20px
   }
   .toc-float::before {
       content:'Table of contents';
       font-size: 1.2em;
   }
   
   </style>

6. You can change the css if you want.
7. If it does not work, try deleting some whitespaces & newlines in the HTML

This solution has one downside I could not solve yet: the header (edit button) will not come slide in when scrolling up. Maybe someone has a solution for this?

[Michael Sharp]

Thank you!

[Michael Yang - Shinetech Software]

You can try this free macro https://marketplace.atlassian.com/1221271, it supports TOC to be scrolled as well.

[René Lopez]

does it work on Confluence Cloud?

[Tauwa]

no !

[Michael Yang - Shinetech Software]

@René Lopez We've released the cloud version: https://marketplace.atlassian.com/1221271

[Stephen Sifers]

Hello Daniel,

I’ve personally responded to a similar post about wanting a floating Table of Contents (ToC). You can accomplish what you are looking for with simple CSS modifications to Confluence. An example of this can be similar to the following:

(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;
}

You may also read through the post which covers this topic further at: Highlighting current toc item (header) while scrolling.

I hope this proves helpful in being able to float your table of contents.

Regards,
Stephen Sifers

[stringsonfire]

It's part-way there, but only works with a relatively short table of contents. I'd need the TOC to be scrollable too.

I think what I should be able to do is put the TOC in a narrow left column and use the following, so that the contents scrolls with the page, but only until the end of the TOC, then it becomes sticky:

.toc-macro {  

    position: -webkit-sticky;  

    position: sticky;  

    bottom: 0;  

}  

However, no variation of this seems to work. I think there might be a bug with "position" in Confluence Server/Datacentre

[Stephen Sifers]

Hello Daniel,

Thank you for the clarification of what you're needing along with your example your testing with.  So we can also test and confirm if this is a defect with the product, could you please send a screenshot of what you have along with the version of Confluence you're currently running?

We look forward to hearing back to help find the cause of the ignored CSS along with helping find a solution for your TOC needs.

Regards,
Stephen Sifers

[Tosin.Ojikutu]

Hi Stephen, Just wanted to check to see if we were able to resolve this issue from a few years back. 

If so, it would be cool to know the solution so we may all adopt it for our own floating table of contents.

Thanks in advance. 

[Dan.Gummerson]

@stringsonfire I'm curious as well, did you ever figure it out? 

[Gabriel Ortiz]

/* Confluence Table of Contents Floating Styles */

.toc-macro {
position: fixed;
top: 100px; /* Adjust this value to set the distance from the top of the page */
right: 20px; /* Adjust this value to set the distance from the right edge */
width: 250px; /* Adjust the width as needed */
max-height: 80vh; /* Limit the height to 80% of the viewport height */
overflow-y: auto; /* Enable vertical scrolling for long ToCs */
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
z-index: 1000; /* Ensure it appears above other content */
}

.toc-macro ul {
list-style-type: none;
padding-left: 15px;
}

.toc-macro li {
margin-bottom: 5px;
}

.toc-macro a {
text-decoration: none;
color: #3572b0;
}

.toc-macro a:hover {
text-decoration: underline;
}

/* Adjust main content to prevent overlap with floating ToC */
#main-content {
margin-right: 280px; /* Adjust based on ToC width + some extra space */
}

/* Media query for smaller screens */
@media (max-width: 1200px) {
.toc-macro {
position: static;
width: 100%;
max-height: none;
margin-bottom: 20px;
}

#main-content {
margin-right: 0;
}
}