Contao-Camp 2024
Ergebnis 1 bis 15 von 15

Thema: Sticky Navigation - Inhalt ruckelt

  1. #1
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard Sticky Navigation - Inhalt ruckelt

    Hi Leute,
    ich habe vor lägerer Zeit mal eine Seite mit einer sticky Navigation gemacht:
    http://www.fotografeninnung-stuttgart.de/
    Leider bin ich damals mit dem o.g. Problem nicht weiter gekommen.
    Jetzt erstelle ich gerade eine neue Seite, bei der auch eine sticky Navigation gefordert wird. Was soll ich machen? Soll ich die "alte" Lösung wieder verwenden und das Ruckeln in Kauf nehmen oder gibt es inzwischen elegantere Lösungen (vielleicht reines CSS), die nicht rucklen?

    Hier der Code für die alte Lösung (moo_navigationDock.html5 als template):

    Code:
    <?php
        // StyleSheet dem <head> hinzufügen
        $GLOBALS['TL_CSS'][] = 'files/CSS/stickyHeader.css||static';
    ?>
    <script>
        (function($) {
            window.addEvent('domready', function() {
     
                // Navigation zwischenspeichern
                var nav = $('nav-main');
                 
                // Position zwischenspeichern
                var navPosition = nav.getPosition();
                 
                // Status ob Position erreicht ist
                var isEntered = false;
                 
                
                // Element für Logo erstellen
                // und am Anfang des ersten a Tags einbinden
                //var navLogo = new Element('span.nav-logo')
                  //      .inject(nav.getElement('ul a.first'), 'top');
                
                
                // Scroll Event an das window anhängen
                window.addEvent('scroll', function(event) {
                     
                    // Prüfen ob die Navigation schon erreicht wurde und ob isEntered true ist
                    if(this.getScroll().y >= navPosition.y && !isEntered) {
                        nav.addClass('sticky');
                     //  navLogo.tween('margin-left', -10); // Einblenden des Logos mit Effekt
                        isEntered++;
     
                    // Prüfen ob der Navigationsbereich seine ursprungsposition einnehmen kann.
                    } else if(this.getScroll().y < navPosition.y && isEntered) {
                        nav.removeClass('sticky');
                     //   navLogo.setStyle('margin-left', -59); // Ausblenden des Logos ohne Effekt
                        isEntered--;
                    }
                });
            })
        })(document.id)
    </script>

    Hier das CSS dazu:

    Code:
    #nav-main.sticky {
     
        /* Resets */
        border-radius: 0 ;
        margin-top: 0px;
     
        /* Fixed Basics */
        position: fixed;
        z-index: 10;
        top: 0;
     
        /* Zentrieren */
        width: 100%;
      /*left: 50%;*/
      /*  margin-left: -470px;*/
      margin: 0 auto;
    }
     
    
     
     
     .nav-logo {
        background: url('../Logos/foto_aktuell-300x50.gif') no-repeat 0px 0px;
        width: 300px;
        height: 50px;
        display: block;
        float: left;
        margin-left: -59px;
        margin-right: 5px;
    }
     
     
     
     
    @media(min-width:768px) and (max-width:979px) {
        #nav-main.sticky {
            /*margin-left: -360px;*/
            margin: 0 auto;
        }
    }
    Ich habe dazu im Forum gesucht, bin aber immer wieder auf Links zu einer Seite gestoßen, die es inzwischen nicht mehr gibt!

    Grüße aus Ludwigsburg
    Jochen Kubik
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  2. #2
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.328
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Naja, das liegt halt daran, dass der Wechsel zwischen #nav-main und #nav-main.sticky abrupt erfolgt. Hast Du mal probiert, dem mit CSS a la
    Code:
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
    beizukommen?

  3. #3
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi lucina,
    das hört sich gut an!

    Habe jetzt beiden Elementen die transition zugewiesen, leider ohne Erfolg!
    Bin ich auf dem Holzweg, oder nur noch nicht richtig Wach?
    Grüße aus Ludwigsburg
    Jochen Kubik
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  4. #4
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich glaube du meinst das Springen, wenn du die Navigation auf fixed setzt.
    Das liegt einfach daran, dass deine #nav-main dann keinen Platz mehr ein nimmt im normalen Fluss. D.h. alle Elemente die darunter liegen springen nach oben. Du musst dann also in dem Fall den Platz entweder anders einnehmen oder die Navigation vorher auch schon aus dem Fluss nehmen.
    Du könntest einfach dem body eine Klasse geben:
    Code:
    $('body').toggleClass('js-sticky-aktive');
    Direkt nach
    Code:
    nav.addClass('sticky');
    Damit das wieder weg fällt nach
    Code:
    nav.removeClass('sticky');
    noch mal
    Code:
    $('body').toggleClass('js-sticky-aktive');
    Damit kannst du dann einem Element ein padding-top geben um die größe der Navigation.
    Zum Beispiel:
    Code:
    body.js-sticky-aktive {
    padding-top: 3em;
    }
    Musst du natürlich noch deinen Bedürfnissen anpassen. Ich weiß jetzt auch nicht ob das bei mootools jetzt so richtig ist. Ich hab das bisher nur mit jquery gemacht ^^
    Sollte aber schon mal ein Ansatz für dich sein, wie man das lösen könnte.

    Viele Grüße

    Edit:
    Für dich passt also eventuell:
    Code:
    body.addClass('js-sticky-aktive');
    und
    Code:
    body.removeClass('js-sticky-aktive');
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  5. #5
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi MacKP,
    hast Du Dir die Seite angeguckt? So viel springt da nichts, es ruckelt eher nur.

    Da ich bei php gaaanz wenig Ahnung habe, weiß ich nicht, wo ich Deinen Code einfügen muß

    Kann ich den frei werdenene PLatz nicht via CSS belegen, das wäre für mich einfacher zu verstehen was da so passiert.

    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  6. #6
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Äh.. das ist JS (und das musst du an den Stellen einfügen, die ich dir genannt habe). Dann wird einfach dem body ne Klasse hinzugefügt und den Abstand machst du dann per CSS. Das kannst du nicht vorher machen, da ja vorher noch nicht der Platz fehlt ^^

    Viele Grüße
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  7. #7
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Upps, Oh.... peinlich ,
    jetzt habe ich verstanden!
    DANKE!
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  8. #8
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Zitat Zitat von MacKP Beitrag anzeigen
    Du musst dann also in dem Fall den Platz entweder anders einnehmen oder die Navigation vorher auch schon aus dem Fluss nehmen.
    Ich setze dazu immer einen DIV Wrapper (o. placeholder-element s.:
    https://stackoverflow.com/questions/...-during-scroll
    drumherum und darin dann absolut positioniert die ganze Navigation - Dann kann man unabhängig mit den Höhen Angaben spielen/animieren (Beispiel: https://www.tierheim-castrop-rauxel.de/)

    Oder auch hier im Forum: https://community.contao.org/de/show...cked-Navigtion
    Geändert von Franko (27.06.2018 um 14:05 Uhr) Grund: Update: Add Sample Link
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  9. #9
    Alter Contao-Hase Avatar von bizon
    Registriert seit
    16.06.2010.
    Beiträge
    1.121

    Standard

    Ruckeln abstellen:
    Die Höhe musst du einem anderen Selektor zuweisen, dann ist Ruhe.
    Code:
    .custom {
        height: 400px;
        display: block;
    }
    #fenster {
        min-height: 400px;
        width: 100%;
    }

  10. #10
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi Leute,

    ich habe jetzt deses script auch in einer anderen Seite eingebaut:
    http://www.contao4.nuone.de/fuer-patienten.html,
    komischer Weise erscheint jetzt die Sticy Navigation, sofort wenn losgescrollt wird, nicht erst wenn sie oben ankommt.
    Ich habe keine Ahnung woran das liegen könnte! Das script ist gleich die CSS unterscheiden sich natürlich!

    Grüße aus Ludwigsburg
    Jochen Kubik
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  11. #11
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Zitat Zitat von kubjo Beitrag anzeigen
    Hi Leute,
    komischer Weise erscheint jetzt die Sticy Navigation, sofort wenn losgescrollt wird, nicht erst wenn sie oben ankommt.
    Kann ich nicht bestätigen - mit Chrome Browser sieht alles korrekt aus ...
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  12. #12
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi Franko,

    stimmt, Chrome und Edge sind sich einig, FF spinnt rum! MIST!!!

    Danke für dein superschnelles feedback!

    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  13. #13
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Fehler gefunden!!!

    Im CSS war ein Schreibfehler, besser gesacht ein ";" vergessen!

    Danke für eure Hilfe!

    Grüße aus Ludwigsburg

    Jochen Kubik
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  14. #14
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Versuchs mal mit

    Code:
    (function($){ 
      $(document).ready(function(){
          var nav = $("#navibereich").offset().top;
    
          $(window).scroll(function(){
            if( $(window).scrollTop() >= nav ) { 
              nav.addClass('sticky');
            } 
            else { 
              nav.removeClass('sticky');
            }
          });
        
      })
    })(jQuery);
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  15. #15
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Uups - Du warst schneller ...
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

Aktive Benutzer

Aktive Benutzer

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

Lesezeichen

Lesezeichen

Berechtigungen

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