Wie würde ich meine Bootstrap-Navigationsleiste "zusammenbrechen" lassen?

Ich versuche, den Scroll-Effekt von hier zu replizieren: http://www.altisliferpg.com/Wie würde ich meine Bootstrap-Navigationsleiste "zusammenbrechen" lassen?

Ich habe das Gefühl, dass sie mit einer stark modifizierten Version von Bootstrap Navbar, die ich hier getroffen habe: http://www.enjin.com/forums/page/1/m/10826/viewthread/8514993-boot-strap-30-navbar-full-module und habe es mich zu passen geändert in spezieller Fall.

Wie würde ich es so machen, wenn Sie die Seite nach unten scrollen, wird die Leiste auf der Oberseite "kleiner" und scrollt mit der Seite während Sie scrollen? Danke

Quelle

2016-04-15 Nitro

Ich werde nur ein paar Links, die ich denke, könnte helfen: http://callmenick.com/post/animated-resizing-header-on-scroll http://stackoverflow.com/questions/24765155/shrinking- navigation-bar-wenn-scroll-down-bootstrap3 –

@HaroenViaene Danke, ich werde es mir ansehen. Für die Bearbeitung der JS, CSS und Sachen hier notiert: http://stackoverflow.com/questions/24765155/shrinking-navigation-bar-when-scrolling-down-bootstrap3 Ich würde nur die Bootstrap-min und andere Dateien richtig ändern ? Hast du eine Idee, welche Bar dieser Typ benutzt? http://www.guildcraft.org/ – Nitro

Sie können css-Übergänge für die Höhe, Schriftgröße und was auch immer Sie wollen, ändern. Setzen Sie dann einfach einen Scroll-Listener, der der Kopfzeile eine Klasse hinzufügt, damit sich die Größe ändert. Schnell (und sehr hässlich) Beispiel. jsFiddle

$(window).scroll(function() { 
    if ($(this).scrollTop()) { 
     $('#header').addClass('small'); 
    } 
    else { 
     $('#header').removeClass('small'); 
    } 
});

Quelle

2016-04-15 15:14:22

Sie sagen "einfach" aber wo würde ich das genau setzen? bootstrap.min.css? – Nitro

Ich weiß nicht wirklich, was Ihre Frage ist. Setzen Sie den Javascript-Teil in ein

Vielleicht sollten Sie das Scroll-Ereignis des Fensters erkennen, danach, stellen Sie die Position des navbar befestigt und dann die Animation durchzuführen. Hier ist ein Beispiel für den Javascript-Teil und ein Link, um es in Aktion sehen:

$(function(){ 

    var performingDownAnimation = false, 
     performingUpAnimation = false; 

    var performScroll = function(){ 
    if($("body").scrollTop() > 0) { 

      if(performingUpAnimation) { 
      $('#logo').stop(); 
      performingUpAnimation = false; 
     } 

     if(!performingDownAnimation){ 
      $('#navbar').addClass('navbar-fixed'); 
      $('#logo').animate({ 'font-size': "12px" }, 1000, function(){ 
      performingDownAnimation = false; 
      }); 
      performingDownAnimation = true; 
     }   

     }else if($("body").scrollTop() == 0){ 

     if(performingDownAnimation) { 
      $('#logo').stop(); 
      performingDownAnimation = false; 
     } 

     if(!performingUpAnimation){ 
      $('#navbar').removeClass('navbar-fixed'); 
      $('#logo').animate({ 'font-size': "48px" }, 1000, function(){ 
      performingUpAnimation = false; 
      }); 
      performingUpAnimation = true; 
     } 

     } 
    } 

    $(document).on('scroll', performScroll); 
});

On scroll event and position fixed

I edited meine Antwort für das Hinzufügen von Unterstützung für die „nach oben“ Richtung zu. Über die Verwendung von Bootstrap für die Animation habe ich keine Ahnung, wie es geht, und ich denke, dass es nicht getan werden kann, da Bootstrap hauptsächlich auf das Anwenden von CSS-Klassen auf verschiedene Elemente basiert. CSS-Klassen sind diskret, aber Sie möchten etwas numerisch animieren, wie es bei der Schriftgröße der Fall ist. So viel, Sie könnten eine Animation erstellen, die "gestaffelt" aussieht.

Quelle

2016-04-15 15:32:29 amedina

bootstrap.min.css? und könntest du es auf eine kleinere Größe reduzieren, aber größer als die im Beispiel? Und wie würdest du es größer machen, wenn du wieder hochkommst? – Nitro

Verwandte Themen