wake-up-neo.com

Verkleinerung der Navigationsleiste beim Scrollen nach unten (bootstrap3)

Ich möchte einen Navigationsleisteneffekt wie auf http://dootrix.com/ auf meiner Seite erstellen (nachdem die Leiste nach unten gescrollt wurde und das Logo kleiner wird). Ich benutze Bootstrap 3 für meine Seite. Gibt es eine einfache Möglichkeit, dies mit Bootstrap zu realisieren?

csstwitter-bootstraptwitter-bootstrap-3
41
Ed_

Sticky navbar:

Um ein Sticky Nav zu erstellen, müssen Sie die Klasse navbar-fixed-top zu Ihrem Nav hinzufügen 

Offizielle Dokumentation:
http://getbootstrap.com/components/#navbar-fixed-top

Offizielles Beispiel:
http://getbootstrap.com/examples/navbar-fixed-top/

Ein einfacher Beispielcode: 

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

mit verwandten jsfiddle: http://jsfiddle.net/ur7t8/

Ändern Sie die Größe der Navigationsleiste:

Wenn Sie möchten, dass sich die Navigationsleiste ändert, während Sie die Seite scrollen, können Sie dieses Beispiel betrachten: http://www.bootply.com/109943

JS 

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

CSS 

nav.navbar.shrink {
  min-height: 35px;
}

Animation:

Wenn Sie beim Scrollen eine Animation hinzufügen möchten, müssen Sie lediglich einen Übergang im Navigationsbereich festlegen 

CSS

nav.navbar{
  background-color:#ccc;
   // Animation
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}

Ich habe ein jsfiddle mit dem vollständigen Beispielcode erstellt: http://jsfiddle.net/Filo/m7yww8oa/

131
Filo

toggleClass funktioniert auch:

$(window).on("scroll", function() {
    $("nav").toggleClass("shrink", $(this).scrollTop() > 50)
});
12
simbasounds

Für diejenigen, die nicht jQuery verwenden möchten, ist dies eine Vanilla-Javascript-Methode, mit classList dasselbe zu tun:

function runOnScroll() {
    var element = document.getElementsByTagName('nav')  ;
    if(document.body.scrollTop >= 50) {
        element[0].classList.add('shrink')
    } else {
        element[0].classList.remove('shrink')
    }
    console.log(topMenu[0].classList)

};

Mit toggle kann dies auf eine schönere Art und Weise durchgeführt werden. In Chrome funktioniert dies jedoch gut

5
Stephane Paquet

Sie können "scroll" und "scrollstop" events kombinieren, um das gewünschte Ergebnis zu erzielen:

$(window).on("scroll",function(){
   $('nav').addClass('shrink');
}); 
$(window).on("scrollstop",function(){
   $('nav').removeClass('shrink');
});
1
johannesMatevosyan

Wenn Sie AngularJS verwenden und Angular Bootstrap verwenden: https://angular-ui.github.io/bootstrap/

Du kannst das so schön machen: 

HTML:

<nav id="header-navbar" class="navbar navbar-default" ng-class="{'navbar-fixed-top':scrollDown}" role="navigation" scroll-nav>
    <div class="container-fluid top-header">
        <!--- Rest of code --->
    </div>
</nav>

CSS: (Note hier verwende ich das Auffüllen als größeres Nav, um zu verkleinern, ohne das Auffüllen, das Sie nach Belieben modifizieren können

nav.navbar {
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;

  background-color: white;
  margin-bottom: 0;
  padding: 25px;
}

.navbar-fixed-top {
  padding: 0;
}

Und fügen Sie dann Ihre Anweisung hinzu

Direktive: (Hinweis Möglicherweise müssen Sie den this.pageYOffset >= 50 von 50 auf mehr oder weniger ändern, um Ihre Anforderungen zu erfüllen.

angular.module('app')
.directive('scrollNav', function ($window) {
  return function(scope, element, attrs) {
    angular.element($window).bind("scroll", function() {
      if (this.pageYOffset >= 50) {
        scope.scrollDown = true;
      } else {
        scope.scrollDown = false;
      }
      scope.$apply();
    });
  };
});

Dies erledigt die Arbeit gut, animiert und cool.

1
Al-Mothafar

Ich verwende diesen Code für mein Projekt 

$(window).scroll ( function() {
    if ($(document).scrollTop() > 50) {
        document.getElementById('your-div').style.height = '100px'; //For eg
    } else {
        document.getElementById('your-div').style.height = '150px';
    }    
}
);

Wahrscheinlich wird das helfen

0
Sudeep Bashistha