Hallo Mango

Das Thema kenne ich auch und habe es auch schon erfolgreich umgesetzt.

Jetzt möchte ich aber, dass die Navigationsleiste von ihrer Position zunächst mit der Seite mitscrollt und erst, wenn sie am oberen Browserrand ankommt dort stehen bleibt, während die Seite weitergescrollt wird.

Aber Danke für den Hinweis.

Dein Problem ist mit ein paar Zeilen JavaScript zu lösen

Und wenn Du fertig bist, kann das Ergebnis so aussehen (klick)

Setzen wir das mal in die Praxis um...

Der Einfachheit halber nehmen wir als Basis ein Beispiel, das ich für ein anderes-, ähnlich gelagertes Problem erstellt habe (klick). Da findest Du auch die Links zur online Demo und zur Projektdatei für den WD.

Der für die o. a. Demo verwendete Code kann weiter benutzt werden. Für Dein Problem habe ich ihn geringfügig modifiziert, damit die NavBar weiter "nach unten" rutscht. Der Code gehört in den Body der HTML Seite...

------------------------------
<div id="NavBar" style="position:absolute; top:  200 px; left:5px;"> 
<iframe src="grafik.htm" name="NavBar" width="100px" height="124px" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"> </iframe>
</div>
-----------------------------

Für die Demo habe ich eine HTML Seite benutzt (grafik.htm), die eine NavBar enthält. Natürlich kannst Du stattdessen ein beliebiges, anderes Objekt benutzen...

Als Ergänzung zu dem o. a. Code müssen für Deinen Fall noch die folgenden Scriptzeilen angehängt werden:

-----------------------------
<script type="text/javascript">
var menu = document.getElementById('NavBar'),
menufixed = 0,
logoHeight = 190;
window.onscroll = onScroll;
function onScroll(e) {
var spy = getScrollY();
if (spy <= logoHeight) {
if (menufixed) {
menu.style.position = 'absolute';
menu.style.top ='200px';
menufixed = 0;
}
} else {
if (!menufixed) {
menu.style.position = 'fixed';
menu.style.top ='10px';
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>
-----------------------------

Das o. a. Script gehört ebenfalls in den HTML Body der Seite.

Die gelb markierten Werte kannst Du nach Deinen Vorgaben anpassen, sie repräsentieren die Position des Objekts (hier die NavBar), die gescrollt- und dann oben fixiert wird und den Abstand vom oberen Rand, an dem das Objekt stehen bleibt.

In beiden o. a. Codes findest Du (grün markiert) die ID des Objects, das gescrollt/fixiert wird. Den Namen kannst Du frei vergeben, er muss nur in beiden Scripts identisch sein.

So sieht die Vorbereitung im WD Editor aus:

Lade Dir einfach hier die Projektdatei herunter und schau Dir den Code- und die Art der Einbettung an. Ich bin sicher, dass Du den gezeigten Effekt dann auch mit Deiner Site realisieren kannst

Viel Erfolg

Hallo BeRo

Das ist genau das, wonach ich gesucht habe und es funktioniert einwandfrei.

Vielen Dank

Timo

der bero hat wieder die lösung, das ist ja klasse, man lernt immer dazu. ein danke auch von mir!

Hallo ihr Lieben, das ist alles ganz super, ich möchte aber gerne, dass die Navileiste zentriert auf der Seite erscheint und nicht links am Rand klebt. Was muss ich denn da im html-Code ändern? Hab schon alles mögliche probiert, aber ich hab vom Programmieren eigentlich keinen Plan . Kann mir jemand helfen? Also die Navileiste soll an einer bestimmten Position sein, dann mitscrollen, und dann oben fixiert bleiben. Also alles wie in der projektdatei von BeRo, nur dass sich die Navileiste mittig auf der seite befinden soll.

Danke!

@eduarda-b8

Versuch mal den Abstand vom linken Rand in Prozenten anzugeben, nicht in Pixeln, dann sollte es gehen...

------------------------
<div id="NavBar" style="position:absolute; top: 200px; left:45%;">
<iframe src="grafik.htm" name="NavBar" width="100px" height="124px" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"> </iframe>
</div>
-----------------------

Den Prozentwert (oben gelb markiert) musst Du ggf. noch ein bisschen variieren, damit er zu Deinem Seitenlayout passt...

Viel Erfolg

------------------------
Edit: 10.02.2016, 23:38 h

Eine verbesserte Variante der o. a. Zentrierung findet Ihr in diesem Kommentar.
Da habe ich eine Ergänzung zu der o. a. Methode beschrieben, mit der ein Objekt präzise in der Mitte eines Browser Fensters positioniert werden kann.

Vielen Dank, das funktioniert erstmal. Aber einen automatischen wert gibt es nicht oder? So ist es ja immer ein bisschen Rate-Spiel, ob es auch wirklich mittig plaziert ist. Und was ist dann bei einem kleineren Bildschirm?

[...] Aber einen automatischen wert gibt es nicht oder [...]

Doch, schon...

Der prozentuale Wert bezieht sich auf die Fensterbreite. Es spielt also keine Rolle, wie breit das Fenster ist, die NavBar steht immer x% der Fensterbreite vom linken Rand entfernt. In unserem Beispiel ist das immer die (ungefähre) Mitte

Ich habe das Problem, dass der iFrame immer hinter den Seiteninhalt (Text, Bilder,...) geht, sodass die Buttons im iFrame nicht mehr klickbar sind.

@Marvin_G

Du postest hier in einem Thread, der schon älter als ein Jahr ist. Hier liest außer den seinerzeit Beteiligten kein Mensch mehr mit.

Es wäre in Deinem Interesse besser, Du würdest einen neuen Thread eröffnen und dort in Deiner Frage auf diesen Thread per Link verweisen.
Außerdem müsstest Du das Procedere mal überprüfen, mit dem du den Screenshot eingefügt hast. Da ist scheinbar was schief gegangen.

Zu Deiner Frage:

[...] Ich habe das Problem, dass der iFrame immer hinter den Seiteninhalt (Text, Bilder,...) geht [...]

Das liegt vermutlich daran, dass Du den Code nicht direkt im Body der Seite eingebunden hast sondern evtl. im HTML Body eines Platzhalters?!

Aber wie gesagt, eröffne einen neuen Thread und stell' Deine Frage dort...

CU