[...] Hat vielleicht jemand eine Lösung oder ein Tipp für mich? [...]

Da die von Dir als Beispiel verlinkte NavBar nicht kleiner wird (sie wird nur ein paar Pixel nach oben verschoben), kannst Du die in diesem Thread gepostete Anleitung benutzen.

Deine NavBar muss "nur" weiter oben positioniert und in die Mitte verschoben werden (Anleitung dazu ist auch im verlinkten Thread) und einen farbigen Balken als Hintergrund bekommen. Den Balken solltest Du ohne zusätzliche Anleitung erstellen können?

Probier's mal.

Viel Erfolg

Danke schon einmal für deine Hilfe :)  aber so ganz will das noch nicht :D

Bei meiner Seite wollte ich irgendwie mit einbauen das Logo verkleinert wird... soweit funktioniert das alles ganz gut.. aber ich habe einmal jetzt das Problem dass der Balken von der Navigationsleiste sich nicht mehr automatisch an die Seitengröße anpasst.. kann man das irgendwie noch ändern?

Also am Anfang ist die Navileiste 1200x170px bzw. der Seitenbreite angepasst.. und nach dem Scrollen sollte sie dann nur noch eine Höhe von 85px haben, aber der Hintergrund sich trotzdem der Seitengröße anpassen....

Ich hab jetzt mal den Code hier eingefügt:

<div id="NavBar" style="position:absolute; top: 85px; left:50%; margin-left:-600px;">
<iframe src="grafik.htm" name="NavBar" width="1200px" height="85px" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"> </iframe>
</div>

<script>
var menu = document.getElementById('NavBar'),
menufixed = 0,
logoHeight = 85;
window.onscroll = onScroll;
function onScroll(e) {
var spy = getScrollY();
if (spy <= logoHeight) {
if (menufixed) {
menu.style.position = 'absolute';
menu.style.top ='85px';
menufixed = 0;
}
} else {
if (!menufixed) {
menu.style.position = 'fixed';
menu.style.top ='0px';
menufixed = 1;
}
}
}
// source: http://www.ajaxschmiede.de/javascript/fenstergrose-und-scrollposition-in-javascript-auslesen/
function getScrollY() {
var spy = 0;
if(typeof(window.pageYOffset) == 'number')
spy = window.pageYOffset;
else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
spy = document.body.scrollTop;
else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
spy = document.documentElement.scrollTop;
return spy;
}
</script>

Von den anderen Problem hab ich mal nen screenshot gemacht... Da hab ich jetzt das Problem wenn man dann scrollt erscheint die Navileiste so ein bisschen doppelt, ist das normal oder kann man das auch noch abändern?

[...] dass der Balken von der Navigationsleiste sich nicht mehr automatisch an die Seitengröße anpasst. [...]

Das ist leider mit dem gezeigten Verfahren nicht zu ändern. Da der Balken innerhalb einer Funktion mit einem iframe eingebunden wird, funktionieren die Attribute (z. B. ausgedehnt) nicht mehr. Natürlich kannst Du den Balken auf die Seitenbreite verlängern aber nicht auf die Breite des Browserfensters.

[...] wenn man dann scrollt erscheint die Navileiste so ein bisschen doppelt, [...]

Das sieht so aus, als hättest Du zusätzlich noch die "normale" NavBar aktiv. Die muss natürlich komplett gelöscht werden, weil sie durch die neue, beim Scrollen fixierte NavBar ersetzt wird.

Probier's nochmal mit den vorgeschlagenen Anpassungen.

Viel Erfolg

Danke dir BeRo... das hat mir mal wieder wirklich weitergeholfen :)

Das ist leider mit dem gezeigten Verfahren nicht zu ändern. Da der Balken innerhalb einer Funktion mit einem iframe eingebunden wird, funktionieren die Attribute (z. B. ausgedehnt) nicht mehr. Natürlich kannst Du den Balken auf die Seitenbreite verlängern aber nicht auf die Breite des Browserfensters.

Also das hat schon mal super geklappt... es funktioniert auf jeden Fall :) Ich hab nun die Seitenbreite von der Grafik auf 4000px vergrößert und den Code angepasst... sodass er nun aussieht:

<div id="NavBar" style="position:absolute; top: 85px; left:50%; margin-left:-2000px; z-index:999;">

Das sieht so aus, als hättest Du zusätzlich noch die "normale" NavBar aktiv. Die muss natürlich komplett gelöscht werden, weil sie durch die neue, beim Scrollen fixierte NavBar ersetzt wird.

Die normale Navbar hab ich jetzt komplett gelöscht und jetzt funktioniert das einwandfrei.

Das einzigste was jetzt wieder nicht klappt ist, dass sich das Logo jetzt wieder nicht verkleinern lässt..

Also so sollte es von Anfang an ausschauen in etwa:

und so wenn man runter gescrollt hat...

kann ich da jetzt noch irgendwas machen, damit ich des erreichen könnte was ich mir vorstell?

[...] was jetzt wieder nicht klappt ist, dass sich das Logo jetzt wieder nicht verkleinern lässt. [...]

Eine echte Verkleinerung wäre nur mit responsive Design zu machen.
Was geht und was Du offenbar auch hinbekommen hast, ist das Verschieben eines Teils des Balkens unter den oberen Rand des Browser Fensters. Damit wird der Balken "kleiner", genauer gesagt in der Höhe schmaler. Klar, dass dabei das auf dem Balken sichtbare Logo seine Größe behält.

Mit einem Trick könntest Du den Effekt simulieren. Mit einem kleinen Scriptcode könntest Du dafür sorgen, dass ab einer bestimmten Scrollposition (z. B. ab 100px) ein neues, kleineres Logo mit einem schwarzen Hintergrund an genau der Stelle des größeren Logos eingeblendet wird und das größere Logo überdeckt.
Wie das gehen kann, das habe ich hier erklärt. Eine dazu passende Demo findest Du hier.

Ich habe den "Trick" noch nicht zusammen mit dem Scriptcode eingesetzt, den Du aktuell verwendest. "Überraschungen" sind also nicht ausgeschlossen...

Dennoch gerne viel Erfolg