Floating TOC in the right column

Corti Corti July 8, 2016

Hi all,

I have a page with a two columns layout and I put a TOC on the right one. I would like to have the TOC always visible even though when I do scroll down. Is there any nice macro solution for this?

I get some results via CSS, setting a name for the div of the TOC and adding some CSS code like

.fixedPosition {   

    max-width:370px;    

    margin0 auto;      

    positionfixed;      

     top: 200px 

any better option?

Many thanks.

J

6 answers

2 accepted

3 votes
Answer accepted
Michelle Rau HP
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
March 22, 2018

Thanks for this! I got decent results via CSS like this. It's a simple, half-transparent light gray box with a thin blue border that stays visible at the top right of the screen.

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

This worked best when I put the TOC with the toc-btf class as the very first thing on the page.

The only annoyance is that other Confluence macros / page parts overlap the TOC in a distracting way. This is minor, but I would rather have the Note's yellow box be under, not over the TOC. If there is an adjustment I can make to CSS please tell me. 

I'm a space admin, not a Confluence admin, so my options are limited. I did see the linked solutions above but they're not an option for me.

overlap.PNG

Zdeněk Šedivý July 10, 2018

Hello,
I have a solution for your problem. Just move the macro with CSS style to the end of the page so that all the other macros used on the page are above CSS style. See picture. :)

1.PNG2.PNG

Like # people like this
Michelle Rau HP
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
July 10, 2018

That worked! Thank you!

Krishnanand Nayak October 15, 2018

This solution worked for us.

2 votes
Answer accepted
Milo Test
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
July 8, 2016

@Davin Studer has your solution:

https://answers.atlassian.com/questions/285311

6 votes
wld-PKumbhare
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
July 19, 2018

I got the TOC to float/sticky, thanks to the wonderful suggestions in this thread, but it only works in the preview mode, when I publish the page the TOC loses it's floating/sticky property. Has anyone faced this issue or am I missing something?

Mike MacDonald August 23, 2018

I am having this same issue. Has something changed due to an Atlassian update?

Kem McFadden
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
September 19, 2018

Same issue here. Works in Preview but not in Published mode.

Dan Towler
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
July 14, 2019

Yep - exactly the same issue here - using the Cloud version. 

Ie. sticks perfectly in PREVIEW but scrolls once Published.

Has anyone found a fix to this one?

4 votes
hmohapatra
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
June 8, 2018

I use this css in a two column page layout, for a floating scrollable TOC on the right side.The two column page does not let the content overlap with TOC.

Screenshot:Screen Shot 2018-06-08 at 11.20.15 PM.png

 

CSS:

.rightFloat {
position: fixed;
height: 600px;
overflow: auto;
top: 100px;
}

 

Michelle Rau HP
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
June 8, 2018

I'll try that out. Thanks much!

Zdeněk Šedivý June 22, 2018

Hi,

What is the macro that you've got the ccs stylesheet on the page?

In Other Macros, there is no such thing.

css.PNG

Thank you. 

hmohapatra
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
June 22, 2018

Name of the macro is CSS Stylesheet. 

Zdeněk Šedivý June 24, 2018

I disagree because there is no such thread on marketplace.atlassian.com. :(

 

https://marketplace.atlassian.com/search?query=CSS+StylesSheet

Damien Tan
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
August 27, 2018

The CSS Stylesheet and div macros in the screenshot above is likely come together with the Content Formatting for Confluence plugin from Adaptavist

Like Max Foerster - K15t likes this
Dan Towler
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
July 12, 2019

Gday team.

I see that this solution, to fix a TOC in place despite scrolling, has been defined using the option:

position: fixed;

I'm using the Cloud-based Confluence and this control seems to have no effect.  I can confirm that all other controls within work. Ie. the TOC is correctly placed on the page, the shading, height and width all effective, but the TOC still scrolls off the page - despite using a FIXED position.

I'd be very grateful to any wiz who can tell me what I'm missing - to make this work.  

Lam Ton December 8, 2019

Thanks, it works for me!

Xfr Dev
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
August 18, 2021

Fyi,

I've just created a user style with the css you have provided : https://userstyles.org/styles/205823/confluence-floating-toc

0 votes
Sidhartha Kumar Sharma
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
May 15, 2021

Thanks for the great suggestions in this thread. 

Is there a way to ensure that the floating ToC do not float over the footer section or the comments section? When it sticks beyond the actual content layout, it overlaps with the comments posted on the specific page.

0 votes
Michael Yang - Shinetech Software
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
October 15, 2019

The floating table of content free plugin has just been released: https://marketplace.atlassian.com/1221271

Puvaneswary S
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
March 17, 2021

This is only for Server and data Center not Cloud

Like # people like this
Anh Nguyen May 2, 2021

Great.  Thanks,

ncline-va
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
May 11, 2022

Would be great to make it available for Cloud :) 

Michael Yang - Shinetech Software
Marketplace Partner
Marketplace Partners provide apps and integrations available on the Atlassian Marketplace that extend the power of Atlassian products.
December 15, 2022

@Puvaneswary S @ncline-va The cloud version is available now!

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events