CSS fixed position navigation aligns with set width in full page layout - html

Question

I'm trying to create a fixed navigation menu which scrolls down the side of the page.
The page has been structured so that everything stretches the full width of the page and then each div makes the fixed width of its content of 860px. Now I've come to add a fixed navigation and I'm struggling to make the fixed navigation align to the right of this content.
I can't have a page wrapper which sets a fixed page width and then contains everything because The backgrounds stretch the full width of the page.
I've tried to add a fixed div to contain the navigation but this div just ends up intercepting all the clicks as it's above the rest of the content.
There are several sections on the page, so I don't think I can nest the navigation inside the first section.
<div id="navigation">
<ul>
</ul>
</div>
<div class="section">
<div class="section-content">
<div class="section-content-panel">
<p>Blah blah blah</p>
</div>
</div>
</div>
<div class="section">
<div class="section-content">
<div class="section-content-panel">
<p>Blah blah blah</p>
</div>
</div>
</div>
And the CSS:
#navigation {
height: 100%;
left: 50%;
margin-left: -480px;
position: fixed;
width: 960px;
z-index: 999;
}
#navigation ul {
background: blue;
height: 200px;
margin: -50px 0 0;
position: absolute;
top: 50%;
right: 0;
width: 80px;
}
.section {
margin: 0 auto;
position: relative;
padding: 0 0 100px 0;
width: 100%;
}
.section-content {
background-color: #1d1d1d;
background-color: rgba(29, 29, 29, 0.96);
color: #ffffff;
padding: 24px 0;
position: relative;
}
.section-content-panel {
margin: 0 auto;
padding-right: 100px;
position: relative;
width: 860px;
}
JSFiddle.
Could someone help me get this working properly?
EDIT
A sketch to show the effect I'm after.
It's a rough sketch, but blue is the viewport, grey are the sections and red is width of all the content. The sections contain all of the content to the red width, but their backgrounds need to expand full screen. The green is the navigation and I want that to sit fixed in the viewport, with the sections scrolling behind it.
I hope that helps clear it up?

Answer 1

Okay, the sketch is clarifying.
I believe you don't need div#navigation. I deleted the div and gave the menu the id, and changed the CSS to this:
#navigation {
background: blue;
position: fixed;
height: 200px;
width: 100px;
top: 50%;
right: 50%;
margin-top: -100px;
margin-right: -480px;
z-index: 999;
}
Check the updated fiddle.
Note1: changing the height or width also requires changing the margins. So when the height or width is dynamic, it won't be aligned right.
Note 2: when the window resizes, the menu won't keep its place. It will flow over the content, you can't fix that, because the list is on a fixed position calculate on the viewport sizes, and not the contents.