Das Problem der nicht fixierten Navigation links kommt wohl durch die Javascripte zustande.
Erst einmal alles sichern damit wir eventuelle Fehler rückgängig machen können.
Dann dieser Abschnitt hier:
<div id="float">
<div style="position: fixed; left: 0; top: 65px; z-index:2; display: block">
<ul id="sidebar-nav" class="nav nav-list">
<li><a href="#"><img src="images/totop.png" onmouseover="src='images/totop_hover.png'" onmouseout="src='images/totop.png'" width="56" height="56" alt=""></a>
</li>
<li><a class="aboutme" href="#uebermich"><img src="images/about.png" onmouseover="src='images/about_hover.png'" onmouseout="src='images/about.png'" width="56" height="56" alt=""></a>
</li>
<li><a class="aboutme" href="#contact"><img src="images/contact.png" onmouseover="src='images/contact_hover.png'" onmouseout="src='images/contact.png'" width="56" height="56" alt=""></a>
</li>
</ul>
</div>
</div>
Alles anzeigen
muss an anderer Stelle stehen und braucht auch nicht die beiden umgebenden Divs.
Den Abschnitt also erst mal verschieben zum Beispiel zwischen
<body>
<div class="container">
Das sollte dann so aussehen:
<body>
<ul id="sidebar-nav">
<li><a href="#"><img src="images/totop.png" onmouseover="src='images/totop_hover.png'" onmouseout="src='images/totop.png'" width="56" height="56" alt=""></a>
</li>
<li><a class="aboutme" href="#uebermich"><img src="images/about.png" onmouseover="src='images/about_hover.png'" onmouseout="src='images/about.png'" width="56" height="56" alt=""></a>
</li>
<li><a class="aboutme" href="#contact"><img src="images/contact.png" onmouseover="src='images/contact_hover.png'" onmouseout="src='images/contact.png'" width="56" height="56" alt=""></a>
</li>
</ul>
<div class="container">
Alles anzeigen
Da die ID sidebar-nav im CSS durch das übergeordnete Div #float angesprochen wurde, welches ja jetzt nicht mehr vorhanden ist, müssen auch im CSS folgende Änderungen durchgeführt werden:
CSS
/* --------------------------
Float Side Bar
----------------------------- */
ul#sidebar-nav {
list-style: none;
position: fixed;
left: 0;
top: 65px;
z-index:2;
}
ul#sidebar-nav li {
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
}
ul#sidebar-nav li:hover {
color: #f3f3f2;
}
Alles anzeigen
Der Code vom Inlinestyle wandert auch ins CSS.
Alles ungetestet, aber jetzt sollte die Seitennavigation auch in den anderen Browsern fixiert sein.
Eventuell den z-index anpassen, durch einen höhren Wert, austesten!
Zu dem Scrollbalken habe ich zur Zeit keine Lösung anzubieten.