• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Onepage - Footer auf jeder Seite

H

Hesslo

Neues Mitglied
Hallo,

ich habe folgendes Problem. Ich mache eine Onepage Seite und will auf jeder neuen Seite eine andere Fusszeile.
Das bekomme ich aber nicht hin. Die Fusszeile ist nur auf der ersten Seite zu sehen.
Realisiert habe ich das über folgendes CSS
#footer {
background:#444;
color:#fff;
position:absolute;
height:20px;
bottom:5px;
left:0px;
right:0;
z-index:auto;
Hat von euch jemand eine Idee wie das zu machen ist?
Danke
 
Werbung:
Hesslo schrieb:
Hallo,

ich habe folgendes Problem. Ich mache eine Onepage Seite und will auf jeder neuen Seite eine andere Fusszeile.
Das bekomme ich aber nicht hin. Die Fusszeile ist nur auf der ersten Seite zu sehen.
Realisiert habe ich das über folgendes CSS
#footer {
background:#444;
color:#fff;
position:absolute;
height:20px;
bottom:5px;
left:0px;
right:0;
z-index:auto;
Hat von euch jemand eine Idee wie das zu machen ist?
Danke
Zum Vergrößern anklicken....

Was willst du?
 
Wenn ich im Menü etwas anklicke soll die Seite nach unten scrollen und diesen Bereich (z.B. Bereich2) anzeigen. Dabei soll auch eine Fusszeile angezeigt werden (speziell für diesen Bereich).
Wähle ich im Menü etwas anderes scollt die Seite zu diesem Bereich (z.B. Bereich 4) und soll wieder eine Fusszeile anzeigen aber eine andere wie im Bereich zuvor.

Es ist gar nicht so einfach das Problem zu beschreiben. Ich hoffe ihr kommt damit klar.
Danke
 
Werbung:
Werbung:
Ist eigendlich gar nicht so schwer...

Da brauchts ein wenig JavaScript (jQuery) Zauberei und fertig.

Beispiel:
Code: 
<header id="header">
   <a href="#1" class="navPoint" id="1">Container #1</a>
   <a href="#2" class="navPoint" id="2">Container #2</a>
   <a href="#3" class="navPoint" id="3">Container #3</a>
   <a href="#4" class="navPoint" id="4">Container #4</a>
   <a href="#5" class="navPoint" id="5">Container #5</a>
</header>

<div id="container">
    <div class="subContainer" id="1"></div>
    <div class="subContainer" id="2"></div>
    <div class="subContainer" id="3"></div>
    <div class="subContainer" id="4"></div>
    <div class="subContainer" id="5"></div>
</div>

<footer id="footer">
    <div class="subFooter" id="1"></div>
    <div class="subFooter" id="2"></div>
    <div class="subFooter" id="3"></div>
    <div class="subFooter" id="4"></div>
    <div class="subFooter" id="5"></div>
</footer>

Die Footers verstecken:
PHP: 
$('div.subFooter').hide();

Und nun das ganze mit jQuery verlinken (hab noch eine animierte ScrollTo Funktion eingebaut):
PHP: 
$('a.navPoint').click(function(event) {
    event.preventDefault();     // click deaktivieren

    $footer = $(this).attr('id');    // footer auswählen
    $('div.subFooter').fadeOut();    // (alle) footer ausblenden
    $('footer#footer div#' + parseInt($footer)).fadeIn();   // gewählten footer einblenden

    $containerOffset = $('div#container div#' + parseInt($footer)).offset().top;   // ausgewählter container position bestimmen
    $('html,body').animate({   // und dahin scrollen
        scrollTop: $containerOffset
    }, 'slow');
});

Achtung: Code ist frisch geschrieben und ungetestet
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben