Highlighting current toc item (header) while scrolling

[Volker Weinreich]

Hi,

as of recently there is a nice toc menu ("On this page") on the confluence developer page (f. e. https://developer.atlassian.com/server/confluence/writing-a-confluence-theme/), which I always tried to implement for our confluence pages (Con 5.10.8). It highlights the current item (header) while you scroll down the document.

With CSS I have already build a macro for a fixed menu with submenus for the page, because we have very long pages (not discussable now). 

But I have no javascript skills (and wasn't able to find the solution by inspecting the page with <F12>). So could someone give me a hint, how can I implement this. The are two main problems:

1. The most solutions with html/CSS/javascript assume that you can define the html structure, for example using <section>, but you can't do that having hundreds of different authors.
2. We have to develop the whole layout only for desktop devices with browser IE 11 or newer IE, so for example I can't use :focus-within or other cool css-tricks.

Thanks in advance,

Volker

[Volker Weinreich · Accepted solution]

The code from @Wade Tracy _Boise_ ID_ for a floating TOC, which is posted in the Boise group, helps me very much, and is exactly what I am searching for: https://community.atlassian.com/t5/Boise/Widget-Wednesday-Floating-TOC-in-Confluence/gpm-p/1095431

Thank you very much, @Wade Tracy _Boise_ ID_!

I could get it to run for Con 5.10.8, but it works in 6.13. There is only one point for an improvement: If you have short sections with headers at the end of the page, these links are not highlighted in the toc.

Now unlike he suggested I would run it as user macro or put it to Custom html and stylesheets.

[AtlassianUser285622]

Hi,

can't this issue be available as a simple ON/OFF switch per page? Solutions (or addons) above cannot be done within corporation environments.

Incredible, that Confluence does not have such basics in year 2022.

Kind regards

[Stephen Sifers]

Hello Volker,

Your idea of having a floating table of contents, similar to what is available within the developer site, is a shared idea and others are interested in this as well. With that said, I tested some solutions I found within Community and found a post which had something close to what you’re looking for. You may see the post at Floating TOC in the right column.

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:

Could you please test this within your environment and let us know the results?

Regards,
Stephen Sifers

[Volker Weinreich]

Hello Stephen,

thank you for your answer.

We have already build a fixed toc within the right column of our pages. (It even displays subsections only by hovering over main sections.) My problem is not the floating or fixing of an element with css. I want the header in the toc to be highlighted when I scroll to its respective section. So when I scroll for example to a section 2.3.1, the header of the section 2.3.1 in the toc gets highlighted (with a different color or whatever). To my knowledge this can only be down with javascript, because there is no pseudo class which tells the scroll position.

And every solution with javascript, which I know, is depended on defined sections in html (f. e. http://codetheory.in/change-active-state-links-sticky-navigation-scroll/)

If you want to have another example for a toc, which I am searching for and which is even better, then please take a look here: http://develop.spacemacs.org/layers/+web-services/confluence/README.html. Here even the subsections are implied.

Greetings,

Volker

[Stephen Sifers]

Hello Volker,

Thank you for reviewing my answer and providing further details as to where you're at in the process and what references you're using.

If you could please, can exactly what you've already completed having a floating TOC? This will allow us to see what's done to see if a javascript solution is available.

Regards,
Stephen Sifers

[Volker Weinreich]

Hello Stephen,

okay, this is our user macro:

## @noparams

<div class="lis-navigation noprint"> 
<ac:structured-macro ac:name="panel">
<ac:parameter ac:name="titleBGColor">#009CE1</ac:parameter>
<ac:parameter ac:name="borderStyle">solid</ac:parameter>
<ac:parameter ac:name="borderColor">#009CE1</ac:parameter>
<ac:parameter ac:name="borderWidth">1</ac:parameter>
<ac:parameter ac:name="titleColor">#FFFFFF</ac:parameter>
<ac:parameter ac:name="title">$svThemeHelper.getScrollPage($content).scrollPageTitle
</ac:parameter>
<ac:rich-text-body>
<ac:structured-macro ac:name="toc" ac:schema-version="1">
<ac:parameter ac:name="maxLevel">4</ac:parameter>
<ac:parameter ac:name="style">none</ac:parameter>
<ac:parameter ac:name="class">tocpanel</ac:parameter>
<ac:parameter ac:name="printable">false</ac:parameter>
</ac:structured-macro>
<p style="display: flex; align-items: center; justify-content: center;"><a href="#main"></a></p>
</ac:rich-text-body>
</ac:structured-macro>
</div>

And the following is the relevant part in the CSS:

/* Inhaltsverzeichnis für Programmseiten */
/* Navigationselement als Panel rechts */

.lis-navigation { 
position: fixed; 
width: 270px;
top: 9em; 
font-size: 14px; 
background-color: rgba(255, 255, 255, 0.8); 
z-index: 10;

}

/* Inhaltsverzeichnis im Panel */ 

.lis-navigation .tocpanel { 
z-index: 10; 
font-size: 14px; 
font-weight: normal; 
line-height: 22px; 
margin-left: -2.7em; 
list-style-type: none; 
} 

/* oberste Ebene der Liste im Panel immer ohne Punkt */

.lis-navigation .tocpanel ul li {
list-style-type: none;
}

/* Schriftgröße der zweite Ebene verkleinern und Text kürzen */

.lis-navigation .tocpanel ul ul li {
font-size: 12px; 
line-heigth: 1em;
list-style-type: none;
margin-left: -2.5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
}

/* Navigation: dritte Ebene verbergen */ 

.lis-navigation .tocpanel ul ul ul { 
display: none; 
} 

/* Navigation: dritte Ebene bei hover einblenden */ 

.lis-navigation .tocpanel ul ul li:hover > ul { 
display: block; 
font-size: 12px; 
line-heigth: 1em; 
list-style-type: none; 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
}




/* Symbol Pfeil nach oben in Navigation */

.lis-navigation p a::before {
content: url(/images/icons/nav_up_lis.gif);
}

/* Mouseover Links Farbanpassung */

a:hover {
color: #ffcc00;
text-decoration: none;
}

.wiki-content a:hover {
color: #ffcc00;
text-decoration: none;
}

 Further it could be relevant to know, that we are using the Scroll Versions plugin and the Scroll Translations plugin.

Screenshot:

Thanks,

Volker

[Volker Weinreich]

Hello Stephen,

Did you find out something? Can you help me with the problem?

Greetings,

Volker