wolfgang: Ein Div soll teilweise fest sein teilweise gleiten

Einen wunderschönen guten Tag

Es war die Seite über ein verlorenes Handy und wie man es finden kann, die mich auf die Idee brachte nachzufragen. Der div-Bereich "Startseite - Hoch zur Navigation" ist dort fixiert.

Etwas Ähnliches würde ich gerne auf meiner Seite auch haben. Um das zu demonstrieren muss ich einen längeren Beitrag meiner Seite nehmen - Junghans Mega zum Beispiel - und diesen ein wenig scrollen.

Google-Div an der korrekten Position

Nach dem Scrollen ist an einem Bestimmten Punkt der div mit der Google-Werbung "oben angekommen" und der sollte dann in der finalen Postition sein. Oder anders: Wenn ich weiter Scrolle soll die Position des Divs auf dem Bildschirm konstant bleiben. Der Div soll nicht nach oben "verschwinden".

Kann man solch eine Technik auch in CSS realisieren?

Herzlichen Dank für jede Antwort und Hilfe
Wolfgng

  1. Lieber wolfgang,

    Nach dem Scrollen ist an einem Bestimmten Punkt der div mit der Google-Werbung "oben angekommen" und der sollte dann in der finalen Postition sein.
    [...]
    Kann man solch eine Technik auch in CSS realisieren?

    mit CSS kann man absolut positionierte Elemente <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=fix positionieren>. Bewegen tut sich dann aber nichts mehr. Wenn das Teil sich zuerst bewegen, dann aber oben immer voll sichtbar bleiben soll, dann benötigst Du JavaScript!

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Wenn das Teil sich zuerst bewegen, dann aber oben immer voll sichtbar bleiben soll, dann benötigst Du JavaScript!

      Naja das ist zumindest mal ein Ansatz. Gibt es da fertige Scripte - am besten klein und kompakt - und wenn ja unter welchem Namen sucht man sowas? Wie würde der Designer eine solche Bewegung nennen?

      1. Wenn das Teil sich zuerst bewegen, dann aber oben immer voll sichtbar bleiben soll, dann benötigst Du JavaScript!

        Naja das ist zumindest mal ein Ansatz.

        Ich fürchte das ist schwierig, mir ist kein Scroll-Event bekannt und aus dem Bauch heraus wüsste ich auch nicht, wie man feststellen sollte wie eine Seite gerade gescrollt ist.
        Sollte dir letzteres gelingen, also die Position eines Elements relativ zum Viewport zu ermitteln, welches aber eben _nicht_ "fixed" (oder die Position eines fixed-Elements relativ zu zum <body> oder so) ist, dann sollte es nicht mehr so wild sein denke ich. Rufe eine Funktion rekursiv alle 500 oder 1500 Millisekunden auf, diese prüft ob und wie weit gescrollt wurde und ändert die Positionierung (und Position).

        --
        sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
        1. Lieber Deus Figendi,

          mir ist kein Scroll-Event bekannt

          das lässt sich ändern: window.onscroll

          Und falls Du meinst, im Firefox würde das (noch immer) nicht unterstützt, dann copy&paste mal folgende Zeile in Deine Adress-Bar:

          javascript:void(eval("window.onscroll=function(e){alert('Event'+e);};"));

          Bei dem geplanten Vorhaben sollte man aber window.onresize nicht vergessen!

          Liebe Grüße,

          Felix Riesterer.

          --
          ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
          1. Hallo Felix

            Danke für das nennen der beiden Events. Trotzdem: Wie nennt man diese Bewegung? Also wie würde man ein Script nennen, wenn man es so geschrieben hätte?

            Also: Bei window.onscroll und window.onresize wird Situationsabhängig die Positionierung resp. die Position geändert. Wonach suche ich?

            Herzliche Grüße
            Wolfgang

            1. Hi,

              Also: Bei window.onscroll und window.onresize wird Situationsabhängig die Positionierung resp. die Position geändert. Wonach suche ich?

              Danach, wie man die Position von Elementen und die Scrollposition des Dokumentes ermittelt.

              MfG ChrisB

              --
              “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
              1. Also ich bin der Meinung, dass es sowas gibt. Also suche ich nach einem Namen.

                1. Hi,

                  Also ich bin der Meinung, dass es sowas gibt.

                  Ich bin keiner anderen.

                  Also suche ich nach einem Namen.

                  Den findest du, wenn du nach dem suchst, was umgesetzt werden soll.

                  MfG ChrisB

                  --
                  “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]