Beim Scrollen Background-attachment von scroll auf fixed setzen

  • Hallo,


    ich bin frisch registriert und hoffe hier an der richtigen Stelle meine Frage zu stellen.

    Ich möchte auf einer Website drei Bereiche untereinander haben.
    Im ersten ist ein Bild im Hintergrund, welches nach oben weggeht beim scrollen, also ganz normal.

    Der zweite Bereich soll nun hochscrollen, sobald das Bild den oberen Bildrand erreicht, soll es von background-attachment: auf fixed gesetzt werden.

    Bisher konnte ich leider noch keine Funktion finden, die das kann.

    Vielleicht würde mir auch am Anfang eine Funktion helfen die erkennt, wann das div den oberen Bildrand berührt.


    Das ist so das Grundgerüst von den interessanten Stellen.

    .start ist soweit von der Sache ja unberührt. Sobald allerdings .zwei komplett reingescrollt ist, soll es kleben bleiben im Hintergrund, im Vordergrund ist Text.

    Ist der Bereich vorbei soll es ganz normal wieder weiterscrollen.


    Hoffentlich hat jemand eine Idee.


    Mit besten Grüßen :)

  • Prinzipiell schon, aber sobald das div vorbei ist, soll ein neues bild von unten drüber scrollen und nicht mehr kleben bleiben aber auch nicht sofort verschwinden.
    Also eher ein background-attachment: scroll, sobald es oben ankommt fixed, wenn es vorbei ist wieder auf scroll.

  • Zitat

    Vielleicht würde mir auch am Anfang eine Funktion helfen die erkennt, wann das div den oberen Bildrand berührt.

    Mit jQuery kannst Du zum einen die Position eines Elementes, hier des mittleren Divs, ermitteln:

    http://api.jquery.com/offset/

    Außerdem die aktuelle Scroll-Position:

    https://api.jquery.com/scrollTop/

    Diese Werte müsstest Du vergleichen. Das Div ist dann am oberen Bildrand wenn beide y-Positionen bzw. top-Werte gleich sind.

    Das ganze in einem Eventhandler für das Scroll-Event, z. B. so:
    https://api.jquery.com/scroll/

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!