Div einblenden wenn man zu einem bestimmten Punkt scrollt
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anlegen
anzeigen
bestimmte stelle
blocken
boxen
display
element
entsprechenden elements
entsprechender funktion
ermitteln
erreichen
erscheinen
funktion
gewissen position
position
schauen
stehen
tag
url
weben
-
Hallo zusammen,
ich habe oben auf meiner Seite ein Menü. Wenn man auf der Seite runter scrollt und man das Menü nicht mehr sieht, soll an der Seite ein neues Menü tag/erscheinen">erscheinen, welches sozusagen mit nach unten scrollt.
Man müsste es also so machen, dass ein div eingeblendet wird, sobald man eine bestimmte Stelle auf der Seite beim scrollen erreicht hat. Ist sowas möglich? Wenn ja, wie?
Viele Grüße
Moritz Müller -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ein Menü was mitscrolled kannst du mit CSS "position: fixed" erreichen.
Ansonsten mal hier schauen: https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop zusammen mit dem Scroll event,
Oder du schaust nach der Bounding Box des entsprechenden Elements https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
Dazu noch element.style und du solltest lösen können, was du erreichen möchtest.
Liebe Grüße -
Du kannst ein div anlegen mit dem neuen Menü. Wie gesagt gibts Du dem ein position:fixed; , damit es später mitscrollt. Zudem gibst Du ihm ein display:hide; , damit es zuerst nicht angezeigt wird. Und das div braucht eine id, zB navibox.
Mit JavaScript kannst Du die Scrollposition ermitteln lassen und dann in entsprechender Funktion das div anzeigen lassen, sobald zu einer gewissen Position gescrollt wurde (also wenn sozusagen das Menü verschwindet).
Im body-tag sollte dann etwas stehen wie onscroll="position()" und die Funktion position sollte dann etwas haben wie
if (document.body.scrollTop >= 50) {
document.getElementById("navibox").style.display = "block";
}
else {
document.getElementById("navibox").style.display = "hide";
}
Beitrag zuletzt geändert: 19.11.2014 21:21:45 von sonok -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
