How to make table of contents to be a sticky nav without JavaScript?
Asked by isaac Yin:

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


Answers:
author: Jared Brenner
body: Hi Isaac,

If you've got access to Adaptavist's paid [Content Formatting Macros for Confluence](https://marketplace.atlassian.com/apps/247/content-formatting-macros-for-confluence?hosting=server&tab=overview) 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!

comments: author: isaac Yin
body: is there anyway without using paid software? just some simple css?


author: Jared Brenner
body: 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.


author: Bill Bailey
body: 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.


author: isaac Yin
body: Thank you Jared for your response.


author: isaac Yin
body: Thank you Bill,

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


author: Bill Bailey
body: You can take a look at the article I wrote that talks about wrapper macros: [Getting-Started-with-User-Macros-Writing-a-Wrapper-Macro](https://community.atlassian.com/t5/Confluence-articles/Getting-Started-with-User-Macros-Writing-a-Wrapper-Macro/ba-p/979571)

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


author: isaac Yin
body: Thank you Bill. Is there any thought on the Sticky TOC macro?


author: Bill Bailey
body: Yes, I was thinking of writing another article around this. An interesting use case. Stay tuned.


author: isaac Yin
body: Good forward to the article. please let me know


author: Chris Nuttall
body: 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.![CSS-Stylesheet.JPG](https://community.atlassian.com/t5/image/serverpage/image-id/50418i14AD971F3AA11145/image-size/large?v=v2&px=999 "CSS-Stylesheet.JPG")


author: Jared Brenner
body: 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


author: Chris Nuttall
body: Jared,

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

Thanks,

<br />

Chris.


author: Jared Brenner
body: Awesome! Let us know if you figure out anything cool to do with it.


author: isaac Yin
body: Still do not solve the problem this table of contents as a option


Tags: confluence-server

server