How to add a Table of Contents sidebar that slides/scrolls with the page?

[myle]

Hi, my website's currently a personal portfolio with work projects describing my process and such. I use a lot of headers to break up the process but I'd like to add a table of contents to allow users to more easily access the information on each project page that always stays visible and is accessible while scrolling on the page (also would be nice if it's collapsible, but it's still obvious it's a table of contents while collapsed). Basically so that users don't have to always scroll back up to a table of contents to jump to different sections on the page. 

As an example for what I'm talking about, this website (https://ahrefs.com/blog/seo-tips/) has the "Quick Links" section on the left that always appears on the page so the user always has an easy at-a-glance view of what's on the page and can easily click to go to a different section. I also like that it's all the way to the side so it's not right in the user's face and doesn't obstruct any info on the page. One thing this example doesn't show is the table of contents box being "collapsible" - my website has maybe ~1.5" of room on each side of the screen but to make sure it doesn't obscure any text while the user scrolls, just thought it'd be nice if they could click to collapse it.

Is there a relatively easy way to incorporate this, with not too complicated coding (I have very, very little experience with HTML)? I'm currently using this method (https://hc.weebly.com/hc/en-us/articles/203905186-Create-Anchor-Links) for a "table of contents/quick links" section so far, but I don't like how it's static and that users would have to constantly scroll back up to click a different link. Also it takes up too much room for where the "main info" should be (which is why I'd prefer it to be right at the sides).

Thank you all in advance!

[Adam7]

Are all your anchor links in a single embed code element, @myle? Can you post the code for that? It might make it easier for someone to figure out what to add to it.

[myle]

Yes I think so? The 2nd link I included in my post shows the specific code I used. I'll copy + paste the section describing the code I used:

"

You can create an anchor using text, images, an external link in your navigation menu, or a button. In this example, we’ll look at using a button to link directly to some text further down on the page.

First, decide where you want to place your anchor and drag an Embed Code element just above or next to that spot. We’ll be using the Exciting Destinations text as the anchor point, and the anchor name is destinations. You can use any word you like - it doesn’t have to be part of the text - but it is a good idea to choose an easy-to-remember name for the anchor. This is the code that needs to go into the element:

          <a name="anchor name">&nbsp;</a>

Don't forget to replace the text "anchor name" with the name you chose!

Next, decide where on the page you want to link from. In this case, it’ll be a call to action button in the header section. When entering the link, you’ll need to use the “Website URL” option and type in the full link to the page followed by #youranchorname. So if your website is www.domain.com and the page you’re working on is about.html, it would look like this:

http://www.domain.com/about.html#youranchorname

"

[Adam7]

Something like this in an Embed Code element is what you'll want:

<style>
	.fixedNavigation
	{
		position:fixed;
	}
</style>
<div class="fixedNavigation">
	<a href="yoursite.com/somepage.html#anchorname">link to anchor</a>
	<br />
	<a href="yoursite.com/somepage.html#anchorname">link to anchor</a>
	<br />
	<a href="yoursite.com/somepage.html#anchorname">link to anchor</a>
	<br />
	<a href="yoursite.com/somepage.html#anchorname">link to anchor</a>
	<br />
</div>

It would probably make sense to put it in a column on the left, then have all the other content on the page in a column on the right.

[myle]

Hi Adam,

Thank you for the code suggestion, sorry for the late reply, was out of state!

I incorporated the code you put with 2 test table of content headers, and it seems to work and shows up on the left. Though a problem showed up: The table of contents overlaps with the content underneath (screenshot attached). The TOC, while on the left side, covers up the content. I'd like to have it appear basically within that blank leftmost column where it won't cover up any text

I looked up trying to widen the max width of the contents for my weebly site (https://weeblytricks.weebly.com/how-to-change-the-width-of-your-weebly-site.html) but their suggestion made the entire overall possible width increase so the TOC and content still overlap. 

Would you happen to know a way where just the table of contents part would be located on the leftmost side, while the rest of the content stays put within the original site width?

Thank you!

[Adam7]

Hmm...

Try something like this:

<style>
	.fixedNavigation
	{
		position:fixed;
		width: 250px;
		left: -275px;
	}
</style>
<div class="fixedNavigation">
	<a href="yoursite.com/somepage.html#anchorname">link to anchor</a>
	<br />
	<a href="yoursite.com/somepage.html#anchorname">link to anchor</a>
	<br />
	<a href="yoursite.com/somepage.html#anchorname">link to anchor</a>
	<br />
	<a href="yoursite.com/somepage.html#anchorname">link to anchor</a>
	<br />
</div>

That will fix the width and then move it slightly more than that to the left.

[myle]

Hi Adam,

Thank you thank you!! This fixed the issue. I added in some font changes and whatnot, and everything's looking like it should be!

Success!

Really appreciate all your help and for taking the time to break down your explanations in a way I could understand!!

[Adam7]

Awesome! I'm glad to see it's working how you wanted it.

[MikeG75]

Hi @Adam, 

Would you be so kind as to help out or point me in the right direction?

I cannot get this sidebar working on this page (https://www.ppehq.com/nppe-exam.html) and I have applied the code on this experimental page (https://www.ppehq.com/delete-me.html.) without luck.

I've also tried a different div class name as noted below. I must be missing something ... 

<style>

    .wcustomhtml 

    {

            position:fixed;

    }

</style>

<div class="wcustomhtml">

<a href="yoursite.com/somepage.html#anchorname">link to anchor</a>

<br>

<a href="yoursite.com/somepage.html#anchorname">link to anchor</a>

<br>

<a href="yoursite.com/somepage.html#anchorname">link to anchor</a>

<br>

<a href="yoursite.com/somepage.html#anchorname">link to anchor</a>

<br>

</div>

Please advise. 

[MikeG75]

Hola @Adam, the first set of code you supplied in the post worked but the second set of code with the positioning didn't work. I don't know enough about CSS and HTML to know why.  

[BJ5]

Can you provide a link to the page where you added that, @MikeG75? I can help with that.

[MikeG75]

Thank you @BJ, 

This is the page (https://www.ppehq.com/delete-me-2.html ) I've been experimenting with. It's working with the first set of code that Adam supplied but not the second. Unfortunately it's not responsive so it doesn't look good on mobile and it scrolls into the bottom of the footer. 

Can I put a text element (in place of the embed element), grab the div class of that text element and enter this code (see below) in the Header for the pages I want this to apply to?

<style>
.fixedNavigation
{
position:fixed;
}
</style>

PS: I wish the css command sticky worked here.  

You're help would be greatly appreciated BJ.  

[BJ5]

No problem! Try using this instead:

<style>
.fixedNavigation
{
    position:fixed;
}
@Media and (max-width: 900px) {
    .fixedNavigation {
        max-width: 80px;
    }
    .fixedNavigation > a {
        padding-bottom: 10px;
    }
}
</style>

This will force the colume with the links to be smaller and add some space underneath each link.

[MikeG75]

Thanks @BJ that worked better.  

PS: One last thing, can I put a text element (in place of the embed element), grab the div class of that text element, and apply css styling code in the Header Code or Footer Code box for the page? Does that question make sense?

[BJ5]

Oh yea, that definitely makes sense and you can do that. I've done similar things before with classes when I wanted to make sure it was visually consistent with the rest of the site.