Navigationsleiste die von einer bestimmten Stelle auf der Site bis zum oberen Rand scrollt

MTB-TiGer schrieb am 07.04.2014 um 14:42 Uhr

Ich möchte, dass die Navigationsleiste von einer bestimmten Stelle auf der Site bis zum oberen Rand mitscrollt und wenn sie den Rand erreicht, dort stehen bleibt, während der rest der Site weiter scrollt.

Kann mir jemand sagen wie ich das im WD 9 Prem. verwirklichen kann?

 

Viele Grüße

Timo

Kommentare

Mango schrieb am 07.04.2014 um 18:15 Uhr

das war schon mal thema hier im forum. das ist eine fixierte navigationsleiste. schau mal hier in den link, der müßte dir weiter helfen >> link>>

MTB-TiGer schrieb am 07.04.2014 um 20:15 Uhr

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.

BeRo schrieb am 08.04.2014 um 17:13 Uhr

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

Zuletzt geändert von BeRo am 08.04.2014, 17:13, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

MTB-TiGer schrieb am 08.04.2014 um 19:11 Uhr

Hallo BeRo

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

Vielen Dank

Timo

 

Mango schrieb am 09.04.2014 um 07:28 Uhr

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

eduarda-b8 schrieb am 18.06.2014 um 15:51 Uhr

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!

BeRo schrieb am 18.06.2014 um 16:07 Uhr

@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.

Zuletzt geändert von BeRo am 10.02.2016, 23:38, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

eduarda-b8 schrieb am 18.06.2014 um 16:31 Uhr

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?

BeRo schrieb am 18.06.2014 um 20:40 Uhr

[...] 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

Zuletzt geändert von BeRo am 18.06.2014, 20:40, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Marvin_G schrieb am 12.08.2015 um 18:04 Uhr

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

BeRo schrieb am 12.08.2015 um 18:19 Uhr

@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

Zuletzt geändert von BeRo am 12.08.2015, 18:19, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Marvin_G schrieb am 12.08.2015 um 18:44 Uhr

Nein ich habe am Seitenaufbau der Seite die du zur Verfügung gestellt hast nichts verändert.

Aber am besten wir diskutieren im neuen Thread weiter