How to create a vertical secondary menu with fixed scroll, left of main content

I want to display anchor links in a block on certain pages. I want them to scroll with the page and I want the block to sit to the left of the main content with no gap @ screens min-width 769px.

I'm currently using a hook element to achieve this which inserts the block before the main content and I use a negative margin to bring it to the left.

I've also tried a left sidebar widget.

My Questions:

1. Is my current set up of using a hook element and CSS the best way to do it? What if I want to place it on a full-width page?

2. If I give it z-index:-1, it is not clickable. How can I make the block sit behind the footer when the page is scrolled to the bottom?

Here's a link to the current setup:

https://charityfasttrack.uk/courses/charity-team-leader-apprenticeship-training/#register

Here's the CSS:

@media (min-width:769px) { 

#nav_menu-5 {
	margin-left:-90px;}
	
#nav_menu-5 ul {
	list-style:none;
	padding:40px 10px;
	margin-right:0;
	overflow:hidden;
        background:#ffffff;
	position:fixed;
	font-family:"Roboto Condensed", sans-serif;
	font-weight:300;
	border-radius:10px 0 0 10px;
	}
}