PaXy: position: fixed scrollt ein stück mit?

SELF-Forum

position: fixed scrollt ein stück mit?

PaXy
– Informationen zu den Bewertungsregeln

Ich habe in der Mitte des Browserfensters eine Zeile, die (wenn der Benuzter nach unten Scrollt) mit nach oben wandern soll.
Wenn aber die Zeile den oberen Rand des Fensters erreicht hat, und somit verschwinden würde, soll sie stehenbleiben. Kann man sowas machen?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. position: fixed scrollt ein stück mit?

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    Ich habe in der Mitte des Browserfensters eine Zeile, die (wenn der Benuzter nach unten Scrollt) mit nach oben wandern soll.
    Wenn aber die Zeile den oberen Rand des Fensters erreicht hat, und somit verschwinden würde, soll sie stehenbleiben. Kann man sowas machen?

    Ja, mit JavaScript:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  <title>TEST</title>  
  <script type="text/javascript">  
[code lang=javascript]//[code lang=xml]<![CDATA[

    window.onload = function ()
    {
     var foo = document.getElementById("foo");
     getOffsetTopAndWidth(foo);
     checkPosition(foo);

    window.onresize = function ()
     {
      getOffsetTopAndWidth(foo); // muss bei jeder Änderung der Fenstergröße erneut ausgeführt werden, um offsetTop und width anzupassen
     };
    };

    function getOffsetTopAndWidth(element)
    {
     fixItOnTop(element, false); // auf ursprünglichen Platz setzen, um offsetTop auszulesen
     element._offsetTop = element.offsetTop;
     element.style.width = ""; // gesetzte Breite löschen, um beim Neurendern neue Breite zu erhalten
     if (window.getComputedStyle)
      element.style.width = window.getComputedStyle(element, "").getPropertyValue("width");
     else if (element.currentStyle)
      element.style.width = element.currentStyle.width; // für IE
    }

    function checkPosition(element)
    {
     fixItOnTop(element, window.pageYOffset > element._offsetTop); // zweiter Parameter ist boolscher Wert; true, wenn Seite so weit gescrollt ist, dass Element oben fixiert werden soll
     window.setTimeout(function () {checkPosition(element);}, 10); // Funktion ruft sich alle 10 ms selbst wieder auf
    }

    function fixItOnTop(element, toTop)
    {
     if (toTop)
     {
      element.style.marginTop = "0";
      element.style.position = "fixed";
      element.style.top = "0";
     }
     else
     {
      element.style.marginTop = "";
      element.style.position = "";
      element.style.top = "";
     }
    }
    //]]>[/code]
      </script>
      <style type="text/css">

    #foo  
{  
 background: orange;  
}

    </style>
     </head>
     <body>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      <p>At vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
      <p id="foo">Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      <p>At vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      <p>At vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      <p>At vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      <p>At vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
     </body>
    </html>[/code]

    Anpassungen für IEs, die fixe Positionierung nicht kennen, sind nötig.

    See ya up the road,
    Gunnar

    --
    „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln