Frage von lightup, 43

Pfeil am Bildschirmrand positionieren?

Hallo zusammen

Wie kann ich einen Pfeil (als Bild) am unteren Bildschirmrand ausrichten, sodass er, egal welches Bildschirmformat, immer den gleichen Abstand zum unteren Rand hat. Beim scrollen nach unten soll er dann aber verschwinden. Er soll nur signalisieren, dass es nach unten weitergeht auf der Seite.

Danke für die Hilfe!

Antwort
von Sarkophator, 24

Dafür kannst du einfach die position-Eigenschaft auf "fixed" setzen und das Bild mittels "bottom" und ggf. "left" / "right" positionieren. Das Bild wird so platziert, dass die jeweilige Kante des Bildes den angegebenen Abstand zur jeweiliigen Kante des Viewports hat. (D.h. bei "right: 20px" wird die rechte Kante des Bildes 20px von der rechten Kante des Viewports entfernt dargestellt)

Das Verschwinden kannst du dann über das Scroll-Event mit Javascript lösen:

https://developer.mozilla.org/en-US/docs/Web/Events/scroll

Einfach das Scroll Event an das Dokument binden und dann über scrollTop die Scrollposition erfragen:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Falls diese größer als 0 ist, entsprechend das Style anpassen. Kleine Demo: (mit jQuery und div-Container statt Bild, Prinzip bleibt gleich)

https://jsfiddle.net/7grs1r11/1/

Antwort
von selfrefactor, 12

Es gibt viele Möglichkeiten. ReactJS ist eine und andere ist noch leichter zu benutzen - react-canvas https://github.com/Flipboard/react-canvas

Antwort
von Dory1, 18

Könnte man in etwa so lösen: http://codepen.io/anon/pen/RRwgLZ

Der Pfeil wird ausgeblendet während der User scrollt oder wenn er am Ende der Seite angelangt ist.

Keine passende Antwort gefunden?

Fragen Sie die Community