Shrinking navigation bar when scrolling down bootstrap3

Question

I would like to build a navigation-bar effect like it is on http   dootrix com  on my page  after scrolling down the bar getting smaller and the logo changes   Im using bootstrap 3 for my page  Is there an easy way to realize it with bootstrap

User · Answer

For those not willing to use jQuery here is a Vanilla Javascript way of doing the same using classList   function runOnScroll         var element   document getElementsByTagName  nav          if document body scrollTop  gt   50            element 0  classList add  shrink         else           element 0  classList remove  shrink             console log topMenu 0  classList        There might be a nicer way of doing it using toggle  but the above works fine in Chrome

User · Answer

If you are using AngularJS  and you are using Angular Bootstrap   https   angular-ui github io bootstrap    You can do this so nice like this     HTML    lt nav id  header-navbar  class  navbar navbar-default  ng-class    navbar-fixed-top  scrollDown   role  navigation  scroll-nav gt       lt div class  container-fluid top-header  gt           lt  --- Rest of code --- gt       lt  div gt   lt  nav gt    CSS   Note here I use padding as bigger nav to shrink without padding you can modify as you want   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      And then add your directive  Directive   Note you may need to change this pageYOffset  gt   50 from 50 to more or less to fulfill your needs   angular module  app    directive  scrollNav   function   window      return function scope  element  attrs        angular element  window  bind  scroll   function           if  this pageYOffset  gt   50            scope scrollDown   true          else           scope scrollDown   false                scope  apply                       This will do the job nicely  animated and cool way

User · Answer

You can combine  scroll  and  scrollstop  events in order to achieve desired result     window  on  scroll  function          nav   addClass  shrink           window  on  scrollstop  function          nav   removeClass  shrink

User · Answer

I am using this code for my project     window  scroll   function         if    document  scrollTop    gt  50            document getElementById  your-div   style height    100px     For eg       else           document getElementById  your-div   style height    150px                    Probably this will help

User · Answer

toggleClass works too     window  on  scroll   function            nav   toggleClass  shrink     this  scrollTop    gt  50

User · Answer

Sticky navbar   To make a sticky nav you need to add the class navbar-fixed-top to your nav    Official documentation  http   getbootstrap com components  navbar-fixed-top    Official example  http   getbootstrap com examples navbar-fixed-top   A simple example code      lt nav class  navbar navbar-default navbar-fixed-top  role  navigation  gt     lt div class  container  gt             lt  div gt   lt  nav gt    with related jsfiddle   http   jsfiddle net ur7t8   Resize the navbar   If you want  the nav bar to  resize while you scroll the page you can give a look to this example  http   www bootply com 109943  JS      window  scroll function       if    document  scrollTop    gt  50           nav   addClass  shrink        else          nav   removeClass  shrink              CSS    nav navbar shrink     min-height  35px      Animation   To add an animation while you scroll  all you need to do is set a transition on the nav    CSS  nav navbar    background-color  ccc        Animation    -webkit-transition  all 0 4s ease     transition  all 0 4s ease        I made a jsfiddle with the full example code   http   jsfiddle net Filo m7yww8oa

[css] Shrinking navigation bar when scrolling down (bootstrap3)

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3