Footer soll mitscrollen, aber unten an einem Container hängen bleiben

[maxpress]

Hallo pfiffiges Forum,

ich habe mal wieder eine Frage an euch.

Mein Footer soll nur bis zu einem bestimmten Bereich mitscrollen.
Ich habe am Seitenende eine Art Seiten-Gesamtübersicht. Wenn der Footer diesen Container erreicht, soll er darüber stehen bleiben und nicht mehr mitscrollen.

Hat vielleicht einer von euch eine Idee??

Ich hoffe ich habe mich verständlich ausgedrückt und freue mich auf eure Antworten.

Viele Grüße

[dazzle89]

Helfen dir diese Links eventuell weiter?

http://jsfiddle.net/FDv2J/1913/

http://stackoverflow.com/questions/5...-certain-point

Du fragst quasi mit Javascript die Höhe ab, bei der sich der Browser befindet und änderst dann das CSS.

Allerdings weiß nicht, wie man sowas bei responsive Webseiten löst. Da befindet sich der Bereich, bis zu dem gescrollt werden soll, je nach Gerät auf einer anderen Höhe. Kann man mir jemand sagen, wie man da am besten vorgeht?

[maxpress]

Vielen Dank für deine fixe Antwort.

Was muss ich im Script ändern damit es so funzt wie ich es brauche?

Muss ich einfach Top durch Bottom ersetzen. Das wäre glaube ich zu einfach oder..?

[Andreas]

Das ist nicht verständlich ausgedrückt. Zeige mal einen Link zur Seite oder erstelle eine statische Seite mit ein paar Elementen und dem Problem.

[dazzle89]

Wenn du dieses Script verwendest:

http://jsfiddle.net/Tgm6Y/1/

Musst du im Javascript nur die letzte Zeile anpassen.

$('#f') ist die Bezeichnung des Footer, hat in diesem Fall die ID "f". Kannst auch ne Klasse verwenden. Dahinter steht der Wert der Höhe in px. Musst du rumtesten, bis er irgendwann passt.

[Andreas]

Mit "nicht verständlich ausgedrückt" meinte ich maxpress. Ein Footer ist unten und wenn er mitscrollt ist er ja erstmal nicht zu sehen. Und wenn der dann stehen bleiben soll, wenn ein bestimmter Bereich erreicht wird, dann würde man ihn ja nie sehen.

[maxpress]

Die Footer-Zeile mit Impressum, Kontakt etc. ist fixiert, soll aber am Ende der Seite über dem "Sitemap"-Bereich stehen bleiben und nicht mehr fixiert sein, aber erst wenn man unten angekommen ist.
Als würde der "Sitemap"-Bereich den Footer hoch drücken.

Zu dazzle89s Antwort:

Dankeschön.
Ich habe es mal ausprobiert und sehe, dass der Content eine feste Höhe braucht.
Was mache ich wenn ich auf den Unterseiten unterschiedliche Content-Höhen habe?

[dazzle89]

Da gäbe es diverse Möglichkeiten.

Du könntest das Script auf jeder Seite mit anderen Werten einbauen. In Contao also z.B. mit verschiedenen Seitenlayouts.

Oder du gibst dem body über die Seiteneinstellungen verschiedene CSS-Klassen, denen du im Javascript andere Werte zuweist.

Beispiel:

$('body.home #footer).followTo(120);
$('body.about #footer).followTo(1500);
$('body.contact #footer).followTo(1650);

Habe es aber selbst nicht getestet. Und wie gesagt sehe ich Schwierigkeiten, wenn deine Seite responsive sein sollte.

Vielleicht kennt jemand hier eine elegantere Lösung.

[Andreas]

Du hast viele Fehler auf der Seite. JS und HTML. Die solltest du erstmal beheben.

Hier mal ne Lösung mit MooTools, weil ich habe gesehen, dass du MooTools neben jQuery auch eingebunden hast.

/* JS - MooTools */
(function() {
  window.addEvent('domready', function() {

  var
    footer      = $('footer'),
    footerZeile = $$('.footer-zeile'),
    checkpoint  = footer.getPosition().y + footerZeile[0].getSize().y - window.getSize().y,
    footerPos   = window.getScroll().y <= checkpoint ? 'below' : 'above'
  ;

  footer.addClass(footerPos);

  window.addEvent('scroll', function(){
    //console.log(window.getScroll().y);
    if(footerPos == 'below' && window.getScroll().y >= checkpoint){
      footer.removeClass(footerPos);
      footerPos = 'above';
      footer.addClass(footerPos);
    }
    else if(footerPos == 'above' && window.getScroll().y <= checkpoint){
      footer.removeClass(footerPos);
      footerPos = 'below';
      footer.addClass(footerPos);
    }
  });

  });
})(); 

/* CSS */
.footer-zeile {
  position: static;
}
#footer.below .footer-zeile {
  position: fixed;
} 

Das scroll-Event feuert sehr oft, das kannst du ausbremsen mit 'scroll:throttle'. Standard sind 250ms. Oder so 'scroll:throttle(100)' für 100ms. Wenn du die auskommentierte Zeile aktivierst, siehst du in der Konsole wie es feuert.