David Rietz: Ebene beim Scrollen der Seite nicht bewegen

Hallo.

Ich wette, dieses Problem ist nicht neu, leider habe ich nach einiger Suche keine funktionierende Lösung gefunden, aber zunächst die Problembeschreibung an sich:

Eine Seite hat mittels SSI ein Menu eingefügt. Die inkludierte Seite wird in einen Layer eingefügt. Der Rest der Seite steht in einer Tabelle unter dem Layer. Ist der Text in der Tabelle nun zu lang, muss gescrollt werden, dabei soll aber das inkludierte Menu nicht mitgescrollt werden, sondern immer an der Position 0,0 im sichtbaren Bereich hängen bleiben.

Beispiel:

...
<style type="text/css">
<!--
.layerpos {
 position: fixed;
 visibility: visible;
 left: 0px;
 top: 0px;
}
-->
</style>
...
<body ...>
<div id="menulayer" name="menulayer" class="layerpos">
  <!--#include file="menu.shtml" -->
</div>
<table>
...
</table>
</body>

Habe gedacht, dass "position:fixed" meine Anforderung erfüllen würde, tut es aber nicht. Wenn ich scrolle, verschwindet der Layer weiterhin im Nirvana meiner Symbolleisten (mal ganz bildlich gesprochen ;-)).

Kann mir jemand helfen?!

Vielen Dank im Voraus und beste Grüße,

David.

  1. Hi David,

    [...] dabei soll aber das inkludierte Menu nicht mitgescrollt werden, sondern immer an der Position 0,0 im sichtbaren Bereich hängen bleiben.

    .layerpos {
    position: fixed;
    visibility: visible;
    left: 0px;
    top: 0px;
    }

    das ist korrekt, so wird der Bereich fixiert.

    Habe gedacht, dass "position:fixed" meine Anforderung erfüllen würde, tut es aber nicht.

    Wenn du den M$IE verwendest, wird es auch nicht funktionieren. Er kann es schlichtweg nicht, der Trottel. Gute Browser dagegen schon - setze es also bitte trotzdem ein. Weiters kommt es bei diesem Konstrukt im M$IE zu Schwierigkeiten, verstecke daher position:fixed vor ihm:

    http://aktuell.de.selfhtml.org/tippstricks/css/browserweiche/

    LG Orlando

    1. Hi Orlando,

      Zunächst einmal danke für deine Antwort ;-).

      Wenn du den M$IE verwendest, wird es auch nicht funktionieren. Er kann es schlichtweg nicht, der Trottel. Gute Browser dagegen schon - setze es also bitte trotzdem ein. Weiters kommt es bei diesem Konstrukt im M$IE zu Schwierigkeiten, verstecke daher position:fixed vor ihm:

      http://aktuell.de.selfhtml.org/tippstricks/css/browserweiche/

      Danke für den Hinweis und den Tipp. Evtl. ist es sogar ganz okay, dass der Trottel das nicht kann, ich denke gerade an die armen Menschen, die noch mit 800x600 rum laufen, die sehen alles ja mit ganz anderen Augen als ich, wer weiß, wie groß das Menu bei denen ist *g*. Aber mal eine andere Frage in der Hinsicht:

      Gibt es ein Event beim Scrollen, auf das ich reagieren könnte, wobei ich mein Menu dann einfach immer in die obere sichtbare Ecke setze?!

      Viele Grüße,

      David.

      1. Hi David,

        Danke für den Hinweis und den Tipp. Evtl. ist es sogar ganz okay, dass der Trottel das nicht kann, ich denke gerade an die armen Menschen, die noch mit 800x600 rum laufen, die sehen alles ja mit ganz anderen Augen als ich, wer weiß, wie groß das Menu bei denen ist *g*.

        Ja, das sollte man unbedingt beachten. Allerdings ist die Gefahr hier IMHO nicht allzugroß, weil Leute, die so wenig Platz haben, eher keine zusätzlichen Dinge wie Sidebars etc. einblenden. Bei höheren Auflösungen sollte man allerdings auch nicht davon ausgehen, dass das Fenster viel größer ist. Ich habe zB meist eine Sidebar offen, sodass trotz der Auflösung von 1152*768 das Fenster nur 868*616px groß ist.

        Gibt es ein Event beim Scrollen, auf das ich reagieren könnte, wobei ich mein Menu dann einfach immer in die obere sichtbare Ecke setze?!

        Du kannst damit per Javascript bei jeder Scroll-Aktion des Benutzers das Menü neu positionieren. Hier findest du einige Beispiele:

        http://mark.ac/help/sticky.html
         http://www.xs4all.nl/~ppk/js/fixedmenu.html

        Leider liegt es in der Natur der Sache, dass diese Workarounds nicht so perfekt sind wie position:fixed, da das Menü dabei etwas ruckelt.

        Hier gab's auch schonmal eine interessante Diskussion, wie man dem M$IE rein mit CSS fixierte Bereiche aufzwingt. Allerdings gibt es dabei einiges zu beachten und teilweise natürlich Probleme:

        </archiv/2002/7/16356/#m91559>
         </archiv/2002/7/16418/#m91901>

        http://rijk.op.het.net/test/fixed.html
         http://home.deds.nl/~thebox/ghost/fixed/fixed_vertical.html
         http://fabrice-pascal.de/artikel/posfixedie6/

        Aber eine interessante Alternative ist das allemal ;)

        LG Orlando

        1. Hi Orlando,

          Ja, das sollte man unbedingt beachten. Allerdings ist die Gefahr hier IMHO nicht allzugroß, weil Leute, die so wenig Platz haben, eher keine zusätzlichen Dinge wie Sidebars etc. einblenden. Bei höheren Auflösungen sollte man allerdings auch nicht davon ausgehen, dass das Fenster viel größer ist. Ich habe zB meist eine Sidebar offen, sodass trotz der Auflösung von 1152*768 das Fenster nur 868*616px groß ist.

          Ich mach den Kram ja unter 1600*1200, ist ja noch ein Zacken schärfer, man erklärt mich auch überall verrückt deswegen (kann ich gar nicht verstehen). Egal...

          Du kannst damit per Javascript bei jeder Scroll-Aktion des Benutzers das Menü neu positionieren. Hier findest du einige Beispiele:

          http://mark.ac/help/sticky.html
          http://www.xs4all.nl/~ppk/js/fixedmenu.html

          Leider liegt es in der Natur der Sache, dass diese Workarounds nicht so perfekt sind wie position:fixed, da das Menü dabei etwas ruckelt.

          Nochmals vielen Dank, hab dort gefunden, was ich brauche (auch wenn ich noch nicht ganz verstehe, wozu man 2 externe Style-Sheets braucht (1. Link), ohne die funktionierts nicht). Aber ich werd mir mal die Mühe machen und das alles auseinander nehmen, dann klappts schon, zumindest kenn ich jetzt meine Lösung, danke!

          Hier gab's auch schonmal eine interessante Diskussion, wie man dem M$IE rein mit CSS fixierte Bereiche aufzwingt. Allerdings gibt es dabei einiges zu beachten und teilweise natürlich Probleme:

          </archiv/2002/7/16356/#m91559>
          </archiv/2002/7/16418/#m91901>

          http://rijk.op.het.net/test/fixed.html
          http://home.deds.nl/~thebox/ghost/fixed/fixed_vertical.html
          http://fabrice-pascal.de/artikel/posfixedie6/

          Aber eine interessante Alternative ist das allemal ;)

          Diese Diskussionen sind sicherlich berechtigt, vielleicht sollte man es sogar dem Benutzer überlassen, ob er das Menu "AlwaysOnTop" haben will (ist ja überhaupt mal eine Idee *g*).

          LG David.