How to make table of contents to be a sticky nav without JavaScript?

[isaac Yin]

How to make table of contents to be a sticky nav without JavaScript? maybe with a little css class. 

[Jared Brenner]

Hi Isaac,

If you've got access to Adaptavist's paid Content Formatting Macros for Confluence app you can use the Div and CSS Stylesheet macros to accomplish this.  What I did was insert a Div macro and set the ID to sticktotop, then put a panel with a ToC macro inside that.  Then I inserted a CSS Stylesheet macro with the following code:

#sticktotop {
 position: sticky;
 z-index: 100;
 top: 0; 
}

The z-index value is set high to ensure it stays on top of all other elements.  The end result is a Table of Contents that scrolls with the user.  Let us know if you find any other ways to do this.

Good luck!

[isaac Yin]

is there anyway without using paid software? just some simple css?

[Jared Brenner]

Since that solution relies on the CSS Stylesheet macro I assume you could enact something in your global stylesheet, but sadly I don't have any experience with that.

[Bill Bailey]

You have two choices:

• Update the global stylsheet to do this. But then it could cause issues with users.
• Create a user wrapper macro that instantiates the ToC macro with the needed class so that your CSS only applies to that macro.

[isaac Yin]

Thank you Jared for your response. 

[isaac Yin]

Thank you Bill,

Can you explain more on the second choice with the user wrapper macro? is there anything I can follow?

[Bill Bailey]

You can take a look at the article I wrote that talks about wrapper macros: Getting-Started-with-User-Macros-Writing-a-Wrapper-Macro

In this case you would do the same thing with a ToC macro, and just add a classed div statement to it.

[isaac Yin]

Thank you Bill. Is there any thought on the Sticky TOC macro?

[Bill Bailey]

Yes, I was thinking of writing another article around this. An interesting use case. Stay tuned.

[isaac Yin]

Good forward to the article. please let me know

[Chris Nuttall]

Hi Jared,

I tried using the CSS Stylesheet macro as you suggested and it doesn't seem to work with the code you provided?

Any suggestions?  See attached screenshot showing how I used the CSS Stylesheet.

[Jared Brenner]

Hi Chris,

It looks like there's a minor syntax error in the CSS Stylesheet macro.  It should be #sticktotop rather than .sticktotop.  Additionally, the Div macro can't be nested in the Section macro, but the reverse seems to work okay for me.  Does that fix it for you?

Jared

[Chris Nuttall]

Jared,

Thanks for the quick response.  That fixed it!!!

Thanks,

Chris.

[Jared Brenner]

Awesome!  Let us know if you figure out anything cool to do with it.

[isaac Yin]

Still do not solve the problem this table of contents as a option