Ergebnis 1 bis 9 von 9

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

  1. #1
    Contao-Nutzer
    Registriert seit
    13.08.2013.
    Beiträge
    63

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

    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
    Geändert von maxpress (02.11.2016 um 11:26 Uhr)

  2. #2
    Contao-Fan
    Registriert seit
    03.01.2012.
    Beiträge
    847

    Standard

    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?

  3. #3
    Contao-Nutzer
    Registriert seit
    13.08.2013.
    Beiträge
    63

    Standard

    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..?

  4. #4
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  5. #5
    Contao-Fan
    Registriert seit
    03.01.2012.
    Beiträge
    847

    Standard

    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.

  6. #6
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  7. #7
    Contao-Nutzer
    Registriert seit
    13.08.2013.
    Beiträge
    63

    Standard

    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?
    Geändert von maxpress (17.11.2016 um 10:42 Uhr)

  8. #8
    Contao-Fan
    Registriert seit
    03.01.2012.
    Beiträge
    847

    Standard

    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:

    Code:
    $('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.

  9. #9
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    PHP-Code:
    /* JS - MooTools */
    (function() {
      
    window.addEvent('domready', function() {

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

      
    footer.addClass(footerPos);

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

      });
    })(); 
    PHP-Code:
    /* CSS */
    .footer-zeile {
      
    position: static;
    }
    #footer.below .footer-zeile {
      
    positionfixed;

    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •