Animate/Shrink Navbar on Scroll Using Bootstrap

Shrinking navigation bar when scrolling down (bootstrap3)

Sticky navbar:

To make a sticky nav you need to add the class navbar-fixed-top to your nav

Official documentation:

https://getbootstrap.com/docs/5.0/components/navbar/#placement

Official example:

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

A simple example code:

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

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() > 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/

Bootstrap 4 multiple fixed Navbars with animated shrink

I think you should wrap both navbars in a single DIV, and make that the data-toggle="affix" element. This way you only make the outer DIV fixed, and the second navbar will naturally follow the height of the 2nd since both are static position.

https://codeply.com/go/DpHESPqZsx

<div class="fixed-top" data-toggle="affix">
    <div class="navbar navbar-dark bg-dark navbar-expand-sm py-5" id="first">
        ... 
    </div>
    <div class="navbar navbar-light bg-light navbar-expand-sm" id="second">
        ...
    </div>
</div>

Adjust the CSS to apply the padding animation to the top navbar instead of the affix element:

.fixed-top #first { 
  -webkit-transition:padding 0.2s ease;
  -moz-transition:padding 0.2s ease; 
  -o-transition:padding 0.2s ease;        
  transition:padding 0.2s ease;  
}

.affix #first {
  padding-top: 0.2em !important;
  padding-bottom: 0.2em !important;
  -webkit-transition:padding 0.2s linear;
  -moz-transition:padding 0.2s linear;  
  -o-transition:padding 0.2s linear;         
  transition:padding 0.2s linear;  
}

Change navigation bar background when scrolling Bootstrap

Ok you using Bootstrap. First you need to remove class bg-transparent because it have !important background color:

Sample Image

And here is tested working solution for you:

(function($){
    $(window).on("scroll",function(){
        var $navbar = $('#main-nav');
        if($(document).scrollTop() > ($navbar.height()+10))
        {
            $navbar
                .removeClass('bg-transparent')
                .addClass('bg-dark');
        }
        else
        {
            $navbar
                .addClass('bg-transparent')
                .removeClass('bg-dark');
        }
    });
}(jQuery || window.jQuery));

How this work?

Generally, during the scroll I check how far the document is from the top of the screen. I take the header height and add 10px to it for some offset.

When the position of the document is larger than the header (when we scrolled down) then I remove the transparent background and add black background. If I scroll up, I remove the black background and restore the transparent background.

I just automatically add and remove classes in the header.

Smooth animation on scroll

check this. I just add only transition here..

$(window).scroll(function() {  if ($(document).scrollTop() > 50) {    $('nav').addClass('shrink');  } else {    $('nav').removeClass('shrink');  }});
body {  padding-top: 50px;  min-height:800px}
nav a {  padding-top: 20px !important;  padding-bottom: 20px !important;  font-size: 18px;}
nav .navbar-toggle {  margin: 13px 15px 13px 0;  -moz-transition: all 0.3s;  -webkit-transition: all 0.3s;  transition: all 0.3s; }
.navbar-brand {  font-size: 30px;      -moz-transition: all 0.3s;  -webkit-transition: all 0.3s;  transition: all 0.3s;}
nav.navbar.shrink {  min-height: 35px;    -moz-transition: all 0.3s;  -webkit-transition: all 0.3s;  transition: all 0.3s; }
nav.shrink a {  padding-top: 10px !important;  padding-bottom: 10px !important;  font-size: 15px;}
nav.shrink .navbar-brand {  font-size: 25px;}
nav.shrink .navbar-toggle {  padding: 4px 5px;  margin: 8px 15px 8px 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top">  <div class="container">    <div class="navbar-header">      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </button>      <a class="navbar-brand" href="#">Brand</a>    </div>    <div class="collapse navbar-collapse">      <ul class="nav navbar-nav pull-right">        <li class="active"><a href="#">Home</a></li>      </ul>    </div><!--/.nav-collapse -->  </div></nav>
<div class="container">  <div class="text-center">    <h1>Bootstrap starter template</h1>    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>  </div>  <div class="text-center">    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>  </div>  </div>

Shrinking bootstrap fixed navbar with logo on scroll

HTML

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button>
      <a class="navbar-brand" href="#"><img src="http://placehold.it/300x214"></a> </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse --> 
  </div>
</nav>
<div class="container">
  <p>Lorem ipsum dolor sit amet, putent tritani necessitatibus eam ad, cum an suas tempor probatus. Ea duo soleat essent possim, decore quaeque mei an. No vis ignota timeam, ne tantas virtute qui. Libris melius inermis ei duo. </p>
  <p> No vix case vocent. Est ei quem definiebas. Ex quod graece per, ne laudem necessitatibus has, habemus perpetua petentium usu te. Esse modus libris ea sed. Et aeterno feugait moderatius ius, nostro tacimates ut sea. Solum incorrupte sadipscing has ei, quot laboramus inciderint no est. </p>
  <p> Ei eos soleat nullam praesent, nostrum pericula voluptatibus ius ad, nibh sadipscing ex has. Sea assentior voluptatum in. Ad mei vitae impedit nominati, usu graece alienum ad, has mundi timeam omittantur cu. Mea tempor populo platonem no, ridens dolorem corrumpit ex mel. </p>
  <p> Possim nonumes an quo, dicat audiam luptatum cu eos. Pro veri graecis mandamus an. Et quo illum definitionem. Eros maluisset est no, eum ad hinc accumsan tractatos. Dicit consul complectitur ex nam, id expetenda referrentur cum, ludus nominavi repudiandae te his. Ullum altera everti has id, inani delectus id qui. </p>
  <p> Id qui clita adipisci disputando. Pri ne exerci primis, no vis dolorem habemus delectus. Ius et consul voluptua, duo ubique noster maiorum ad. Te ius malis debet repudiandae. Id pri quas deserunt. Eos error singulis ullamcorper no. </p>
  <p> Ridens definitionem has ea, ex omnes oblique mei. Vel ad repudiare comprehensam, no sit utamur inciderint. Ius partem omnium graecis at. Putent tritani qualisque sea at, doctus quaerendum vel at. Simul qualisque te vis, ad nec causae iisque oportere. Quis errem te mei. </p>
  <p> Delicata dissentiunt comprehensam nec eu. Qui nostrud patrioque ad, vis at efficiantur complectitur. Ex has dissentiet conclusionemque, ea inermis partiendo nam. Nec vidisse mentitum deseruisse at, oratio cetero voluptaria ea nec, tempor scripserit sit ad. Duo dicta animal ut. Gloriatur percipitur adversarium vel et, numquam principes consequuntur mea no. </p>
  <p> Mea ex vide invidunt, eruditi dissentiet conclusionemque vis et, in pro consul partem maiestatis. Cibo libris necessitatibus ei cum, alia solet minimum in usu. Labores recteque et his. Purto oratio per ne. </p>
  <p> Et usu iuvaret efficiantur, possim copiosae invenire eu cum, sed dolores corrumpit ne. Tota volutpat forensibus an sit, has dolorum fuisset detraxit no. Ne duo hendrerit reformidans. His ex sanctus fabulas inimicus. Te vocent eripuit cum. </p>
  <p> Ex qui inani inimicus persequeris, lobortis indoctum adipiscing est in, viris perfecto pericula eum at. Volumus abhorreant disputando est an, liber simul duo ea. Ne maluisset moderatius est, quo amet maiorum honestatis no, modus offendit has an. Harum praesent maiestatis no eam, sit ex vocibus voluptua, ne his ullum doming. Cu wisi inciderint has. Sed adhuc malis utinam te, quis labitur in ius, facilisis gubergren et cum. </p>
  <p> Choro perpetua sed et, mea dicam libris quaerendum cu. Ea dictas interpretaris duo. Quo ut facete aperiri repudiandae. Affert philosophia vis ne. Denique maluisset iracundia ut sit, ad pri unum consul ubique, tantas inimicus interesset ut usu. His an minimum sadipscing. </p>
  <p> Meis facer vitae vix id. Autem dissentiunt mei cu. No insolens expetenda consetetur mei. Omnesque persequeris at duo. Sit cu nonumes deserunt assentior, has dolor sententiae an. Pro atqui vivendo at, id lorem inani constituam est, singulis salutatus pri ei. </p>
  <p> Sit ne timeam iisque, tation aeterno eleifend ex has. Ea duo zril pericula disputationi. Albucius argumentum et has. Te quo agam ignota assueverit, sed audiam prodesset ex. Mei ad tale vocibus, ut nec quodsi eripuit. </p>
  <p> Consul omittam qui at, everti fastidii accumsan ei mea. Dicant fastidii est ex, et vel quis facilis persecuti. Feugiat sententiae definitionem sea eu, cu movet habemus sea, usu in persius officiis reprehendunt. Pro nisl legere pertinacia ad, forensibus interpretaris ex mel. </p>
  <p> Ad vix dicant homero, aperiri electram posidonium his eu. Eum altera platonem ex. Eam eu civibus invidunt. Oratio efficiendi eu per, pri electram salutatus id, an meis omnis regione pro. </p>
  <p> In dolorem propriae sententiae mea. Vix ei assum movet vocibus. Te sea simul fastidii accommodare, at qui malis saepe insolens, et his quando appellantur. Vituperata eloquentiam mediocritatem mea ex. Modus admodum phaedrum vis eu, eum vitae ornatus ne. </p>
  <p> Purto vocent quo et, sed audire assentior cu. Civibus assentior eam cu. Usu facer quaeque ad. Nihil debitis mea eu, error nominati volutpat no ius. Et probo nostrum forensibus his, vis ad labitur honestatis. </p>
  <p> Regione postulant scripserit sea ut. Ea falli intellegam mea, eu senserit volutpat eam. Ne cum facilisi suavitate, ut dico scripta voluptaria vix. Cum vero splendide signiferumque ex. His et assum aeterno, eu sea meis doctus assentior, mea legimus mediocritatem cu. Pri an veniam partiendo. </p>
  <p> Quis aliquid theophrastus id pri. Cu mei placerat evertitur. In pro vidisse similique, ut summo constituam accommodare vis. Cu sit affert apeirian. Cum choro omittam platonem at, vis prima doctus an. Vel quaeque assueverit voluptatibus et, an eos dicta nonumes legendos, error dolorem accusamus nec at. </p>
  <p> Te nec epicuri posidonium. Nullam scripta discere in eam, mei ut erat magna, eius equidem detracto sed ei. Vel lorem erant splendide ex, menandri voluptaria comprehensam cum eu. Fugit appareat disputationi cu usu. Everti noluisse adipiscing pro in, his diam fabulas adolescens an. </p>
  <p> Has ei alia justo gubergren, patrioque aliquando dissentiunt est at. Mel ut viris labore, idque oportere ea per, sea alii case dicam id. Ne ipsum dicit sed, ignota nominavi te usu. Velit debitis sea ne, mei audiam apeirian intellegebat te, cu vim rebum feugait consectetuer. At probo zril perpetua eam. </p>
  <p> Est no stet interesset signiferumque, vix te nullam adipisci reprehendunt. Nam eu dicunt accusam, debet primis lobortis te nec. An vide euismod sententiae sed, eu sea congue scripta, dicant mediocritatem sit no. Hinc saperet ne vis, aperiri cotidieque in his, nec simul omittantur ad. </p>
  <p> Quem prompta philosophia et eos, pri in fierent scriptorem. Ei dicunt persius eum, ne usu odio mollis. Ne pro tibique erroribus, pro incorrupte cotidieque an. Cum legendos laboramus ad. Admodum percipit theophrastus vim ut, vidit fabulas delenit sit ad. </p>
  <p> Disputando neglegentur eam ut, molestiae cotidieque instructior te ius. Mei omnes suavitate ea. Movet eligendi no sit. Oblique nostrud maluisset ne eam, veritus philosophia eos in. </p>
  <p> His cetero tacimates in, ne falli altera persequeris eum. At tacimates. </p>
</div>

CSS

/* NavBar Toggle X Animation */

.navbar-toggle {
  border: none;
  background: transparent !important;
  transition: all 0.3s;
}

.navbar-toggle:hover {
  background: transparent !important;
}

.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.3s;
}

.navbar-toggle .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggle .middle-bar {
  opacity: 0;
}

.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
}

.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}

.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
}


/* Navbar Shrink */

nav a {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  font-size: 18px;
  transition: all 0.3s;
}

nav .navbar-toggle {
  margin: 13px 15px 13px 0;
}


nav.navbar.shrink {
  min-height: 35px;
  transition: all 0.3s;
}

nav.shrink a {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  font-size: 15px;
  transition: all 0.3s;
}

nav.shrink .navbar-toggle {
  padding: 4px 5px;
  margin: 12px 15px 8px 0;
  transition: all 0.3s;
}
.navbar-brand > img {
  width:100%;
  height:30px;
  margin-top:-5px;
  transition: all 0.3s;
}
nav.shrink .navbar-brand > img{
  width:100%;
  height:24px;  
  margin-top:5px;
  transition: all 0.3s;
}

Live demo

shrinking bootstrap navbar in Rails app on scroll

Here you can find the clean scss code. The snippet in the answer uses the fully prefixed css result (you shouldn't need it if you run your code through either grunt or gulp.

If it doesn't work for you, perhaps you should create an example showing how your current non-shrinked navbar looks like, so I can see what properties I need to animate in order for the shrink-ing transition to work.

$(document).scroll(function() {  if ($(document).scrollTop() > 50) {    $('nav').addClass('shrink');  } else {    $('nav').removeClass('shrink');  }});
    body {  min-height: 150vh; }
  .navbar-brand img {    max-height: 120px;    -webkit-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);    -o-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);    -moz-transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); }    .navbar-default.shrink .navbar-brand img {      max-height: 45px; }  @media (max-width: 767px) {    .navbar-brand {      float: none;      display: inline-block;      padding: 0 15px;   }      .navbar-brand img {        max-height: 45px;        display: inline-block;        margin: 15px auto;   }}
.navbar-default .navbar-nav > li > a {  line-height: 120px;  -webkit-transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);  -o-transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);  -moz-transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);  transition: line-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); }  @media (max-width: 768px) {    .navbar-default .navbar-nav > li > a {      line-height: initial;   }}.navbar-default.shrink .navbar-nav > li > a {  line-height: 45px; }  @media (max-width: 768px) {    .navbar-default.shrink .navbar-nav > li > a {      line-height: initial;   }}
@media (max-width: 767px) {  .navbar-default .navbar-toggle {    margin: 20px 8px;   }}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/><link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script><nav class="navbar navbar-default navbar-fixed-top" role="navigation">  <div class="container-fluid">    <div class="navbar-header">      <a class="navbar-brand" href="#"><img src="https://www.grouptravelvideos.com/images/client/00954/resources/you%20logo%20here.png" /></a>      <!-- Brand and toggle get grouped for better mobile display -->      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">        <span class="sr-only">Toggle navigation</span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </button>    </div>  </div>
  <!-- Collect the nav links, forms, and other content for toggling -->  <div class="collapse navbar-collapse" id="navbar">    <ul class="nav navbar-nav navbar-right">      <li><a href="/about"><span class="sr-only">(current))</span>About</a></li>      <li><a href="/ems">Ems</a></li>      <li><a href="/team">Team</a></li>      <li><a href="/contact">Contact</a></li>    </ul>  </div><!-- /.navbar-collapse --></nav>

Nuxt/Vue/Bootstrap-vue shrink navbar on scroll

In your .vue:

<template> section:

<nav id="nav" class="navbar is-transparent is-fixed-top">

<script> section:

export default {
mounted() {
      this.$nextTick(function(){
        window.addEventListener("scroll", function(){
          var navbar = document.getElementById("nav");
          var nav_classes = navbar.classList;
          if(document.documentElement.scrollTop >= 150) {
            if (nav_classes.contains("shrink") === false) {
              nav_classes.toggle("shrink");
            }
          }
          else {
            if (nav_classes.contains("shrink") === true) {
              nav_classes.toggle("shrink");
            }
          }
        })
      })
    },
}

Live Demo on codesandbox


Related Topics

Position: Absolute and Parent Height

Maintain Image Aspect Ratio When Changing Height

Chrome Download Attribute Not Working

Is Type="Text/Css" Necessary in a ≪Link≫ Tag

How to Draw a Trapezium/Trapezoid with CSS3

Document.Body.Scrolltop Is Always 0 in Ie Even When Scrolling

How to Force a Page Break in HTML Printing

Size of Font in CSS with Slash

Best Way to Synchronize Local HTML5 Db (Websql Storage, SQLite) with a Server (2 Way Sync)

How to Generate an HTML Report for Junit Results

Closing HTML ≪Input≫ Tag Issue

Why Would a Developer Place a Forward Slash At the Start of Each Relative Path

Color For Unicode Emoji

Difference Between ≪Input Type='Submit' /≫ and ≪Button Type='Submit'≫Text≪/Button≫

Scale Image to Fit a Bounding Box

CSS Side by Side Div's Auto Equal Widths

Center Aligning a Fixed Position Div

How to Style a Mouseover on an Image Map Using CSS


Leave a reply



Submit