Darstellung mit position:fixed

[AzRaIL]

Guten Abend liebe Forengemeinde,

arbeite derzeit lokal an einer Seite. Sie ist folgendermaßen aufgebaut:

links ein vertikales menü und rechts Inhalt. Außerdem ein Hintergrundbild das über die gesamte Breite und Höhe geht. Das Menü sowie das Hintergrundbild haben fixe Positionen (position:fixed) Sodass wenn man scrollt sich nur der Inhalt bewegt. Hoffe das ist bis hierher verständlich.

Nun möchte ich auf meiner Startseite auf der kein Inhalt vorhanden ist (Nur links das Menü, sowie Thumbnails meiner Slideshow mittig) unten am Rand einen Bereich einfügen den man per Klick auf und zu "togglen" kann.
Der Bereich soll also ausgefahren werden bei Klick und das Hintergrundbild mit fixer Position soll ebenfalls hochrücken. Habe dem Bereich der hochgefahren werden soll position:absolute; und bottom:0px; gegeben. Wenn ich ihn jetzt nun per klick öffne bewegt sich das Hintergrundbild logischerweise nicht sondern der Inhalt des Bereiches überlappt einfach nur den Hintergrund.

Ok während des Schreibens ist mir mein Problem grad bewusst geworde. Ich denke am sinnvollsten wäre es mit jQuery dem Hintergrund ne relative position zu geben sobald der Bereich aufgeklappt wird. Oder gäbe es noch alternativen?

Zweite Sache wäre dass wenn ich den Bereich unten "auftoggle" per klick, man erst runterscrollen muss um den Inhalt zu sehen. Gibt es ne möglichkeit dass der viewport automatisch runter fährt sobald der Bereich aufgeklappt wird?

lg

 

[threadi]

Ja, jQuery wäre vermutlich passend für die Anwendung. Allerdings kann man das schwer anhand einer puren Beschreibung beurteilen. Kannst Du nicht einen Link zu deiner Seite posten, so dass man sich das direkt anschauen kann?

 

[Cheffchen]

Hallo,

also echt ein link währe schon schön.
Das mit scrollen "scrollto" mit jquery.
Das mit Menü und position:fixed, hast aber an kleinere viewport gedacht, nicht das letzter punkt bestellen oder impressum ist und das viele nicht sehen :O)

Cheffchen

 

[AzRaIL]

Danke für die Hilfe. Klappt nun alles. Hab die Seite leider nur Lokal aufm Rechner sonst würde ich natürlich einen Link posten.

Lösungen falls es jemanden Interessiert:

Das erste Problem einfach gelöst indem ich für die Startseite dem Hintergrund keine fixe Position gegeben hab (GENIUS )

Das mit dem Scrollen hab ich folgendermaßen gelöst:

jQuery('div.toggler').click(function() {
        setInterval(function() {
            var fensterHeight = jQuery(window).height();      
            jQuery(window).scrollTop(fensterHeight);
        },30);
    });

EDIT: Mir fällt grad auf das die Lösung nicht so richtig funzt da dann alle 30ms ans ende der Seite gesprungen wird ... Hab es jetzt ersetzt mit folgendem Code:

jQuery('div.toggler').click(function() {
        setTimeout(function() {
            var fensterHeight = jQuery(window).height();       
            jQuery(window).scrollTop(fensterHeight);
        },500);
});

Jedoch wartet das Programm jetzt 500ms und springt dann direkt runter ans ende anstatt zu "animieren". Wie könnte man das noch hinkriegen? Jemand ne Idee?