Bootstrap snippet and html example. Responsive Parallax Navbar

<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
            <span class="glyphicon glyphicon-bar"></span>
            <span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span>
        </button>
    </div>
    <div class="container bootstrap snippets bootdey">
        <div class="navbar-header">
            <div class="small-logo-container"> <a class="small-logo" href="#">↥Small Logo</a>
            </div>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Active</a>
                </li>
                <li><a href="#">Link</a>
                </li>
                <li><a href="#">Link</a>
                </li>
                <li><a href="#">Link</a>
                </li>
            </ul>
        </div>
        <!--/.navbar-collapse -->
    </div>
</div>
<div class="container big-logo-row">
    <div class="container bootstrap snippets bootdey">
        <div class="row">
            <div class="col-xs-12 big-logo-container">
                 <h1 class="big-logo">↧Big Logo</h1>
            </div>
            <!--/.col-xs-12 -->
        </div>
        <!--/.row -->
    </div>
    <!--/.container -->
</div>
<!--/.container -->
<div class="container bootstrap snippets bootdey">
    <div class="row">
        <div class="col-lg-5 col-md-6 col-sm-8">
             <h2>Lorem ipsum</h2>
            <p>Dolor sit amet, consectetur adipisicing elit. Id maxime repellat repellendus
                porro voluptas laudantium similique eveniet quis perferendis beatae commodi
                sunt ullam provident dolorum doloribus esse accusamus dolores. Corrupti.</p>
            <p>Consectetur incidunt voluptatibus ipsa nisi esse eos deleniti repudiandae
                at quo sit praesentium nemo optio perspiciatis sequi quaerat voluptates
                minus reprehenderit doloremque accusamus et quisquam nesciunt sunt consequatur
                explicabo excepturi!</p>
            <p>Sequi facilis ea dolor asperiores quibusdam eveniet optio corporis et
                accusantium voluptatem architecto quis iste recusandae molestias dolorem
                soluta ex blanditiis illo impedit laborum iusto? Iure sapiente eos molestiae
                est?</p>
            <p>Numquam delectus recusandae nesciunt rem itaque harum corporis maxime
                hic iste molestias adipisci excepturi ullam libero necessitatibus cum eum
                modi minus obcaecati est nemo quia velit earum perferendis consectetur
                porro?</p>
            <p>Accusamus dicta consequatur quos ipsum rerum tempora assumenda ex excepturi
                itaque soluta magnam debitis voluptatibus neque eos porro. Neque tempora
                ea beatae delectus facere quas voluptas accusamus maxime enim consequuntur.</p>
            <p>Saepe obcaecati facilis dolore numquam nam quod laudantium. Rerum esse
                voluptas eum aut porro beatae adipisci exercitationem ab voluptatum corporis
                quas placeat sapiente nisi ut officia eaque debitis. Corrupti eveniet!</p>
            <p>Eius natus numquam tempore alias ipsam commodi aut similique corporis
                beatae velit maxime obcaecati voluptatibus cum repudiandae minus inventore
                doloremque optio saepe nihil eum reprehenderit quas consequuntur perspiciatis
                quo quam.</p>
            <p>Ea perspiciatis incidunt unde ipsam cupiditate necessitatibus magnam quod
                odit. Beatae adipisci non praesentium tenetur dolores fugit repellat consequuntur
                unde aperiam eligendi ipsa doloribus corporis officiis ipsam quod numquam
                assumenda!</p>
            <p>Ullam ut ex cum corporis numquam quia hic aut nisi itaque laboriosam eaque
                earum commodi nulla magni voluptate reiciendis laborum esse odit blanditiis
                aperiam veniam eos velit similique eveniet ad.</p>
            <p>Esse veritatis inventore explicabo hic consequuntur ex autem praesentium
                quaerat blanditiis illo deleniti dolorum porro tenetur. Repellat sed repellendus
                natus cum molestias numquam vitae vel eum voluptatem praesentium tempora
                quae.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est nostrum
                consequatur odit eius blanditiis sit mollitia ut porro cumque nam repudiandae
                accusantium nisi excepturi corporis incidunt inventore ipsam? Officiis
                eum!</p>
            <p>Nostrum minus dicta quod totam autem ipsum illo velit labore obcaecati
                est ducimus ullam sit iusto ea pariatur sint nulla perferendis modi dolorum
                cumque non laboriosam ratione maiores possimus numquam!</p>
            <p>Deserunt ex dolor atque sapiente suscipit aspernatur et iste necessitatibus
                enim magni blanditiis quaerat rerum perspiciatis expedita magnam nihil
                neque natus quos quidem veritatis eligendi dolorem itaque laboriosam beatae
                dolores!</p>
            <p>Nostrum tenetur rem cum tempora sapiente at possimus assumenda ex quos
                illum facilis quibusdam facere voluptatum. Necessitatibus tempore animi
                earum inventore quaerat sit velit totam rem nulla consequuntur dolorem
                architecto!</p>
            <p>Illum doloremque ipsa magni fugiat explicabo nam officiis expedita architecto
                voluptatem beatae deserunt optio iusto nostrum facere voluptatum. Tempora
                dolore quasi vero aut voluptatem eaque nobis iusto enim dignissimos molestias!</p>
        </div>
        <!--/.col-xs-12 -->
    </div>
    <!--/.row -->
</div>
<!--/.container -->

/* *********************************
   Some Style Overrides on Bootstrap
  ********************************** */
.navbar-inverse {
   background: rgba(62,195,246,0);
  border-bottom: none;
}
.navbar-inverse .navbar-toggle {
  border: 1px solid #333;
  border-color: rgba(255,255,255,0.7);
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
   border-color: transparent;
  @media (max-width: 767px) {
    background: rgba(255,255,255,0.75);
  }
}
.navbar-inverse .navbar-nav > li > a {
color: black;
  

}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
color: #22F;

}
ul.nav {
}

/* *********************************
           Toolbar Logo
  ********************************** */
.small-logo-container {
    padding-top: 50px;
    height: 50px;
    overflow: hidden;
  }

.small-logo {
  color: white;
  font-size: 2.5em;
  padding-bottom:  2px;
}

/* *********************************
           Big Logo
  ********************************** */
.big-logo-row {
  background: gold;
  
  .big-logo-container {
    padding-top: 100px;
  }
  
  h1 {
    font-size: 8em;
    margin:0;
    padding:0 0 15px 0;
    
    @media (min-width: 400px) { font-size: 4.5em; }
    @media (min-width: 440px) { font-size: 5.5em; }
    @media (min-width: 500px) { font-size: 6.5em; }
    @media (min-width: 630px) { font-size: 7.5em;  }
    @media (min-width: 768px) { font-size: 9em; padding-bottom: 15px * 2; }
    @media (min-width: 1200px) { font-size: 12em; }
  }
}

$(window).scroll(function() {
  var navbarColor = "62,195,246";//color attr for rgba
  var smallLogoHeight = $('.small-logo').height();
  var bigLogoHeight = $('.big-logo').height();
  var navbarHeight = $('.navbar').height(); 
  var smallLogoEndPos = 0;
  var smallSpeed = (smallLogoHeight / bigLogoHeight);
  var ySmall = ($(window).scrollTop() * smallSpeed); 
  var smallPadding = navbarHeight - ySmall;
  if (smallPadding > navbarHeight) { smallPadding = navbarHeight; }
  if (smallPadding < smallLogoEndPos) { smallPadding = smallLogoEndPos; }
  if (smallPadding < 0) { smallPadding = 0; }
  $('.small-logo-container ').css({ "padding-top": smallPadding});
  var navOpacity = ySmall / smallLogoHeight; 
  if  (navOpacity > 1) { navOpacity = 1; }
  if (navOpacity < 0 ) { navOpacity = 0; }
  var navBackColor = 'rgba(' + navbarColor + ',' + navOpacity + ')';
  $('.navbar').css({"background-color": navBackColor});
  var shadowOpacity = navOpacity * 0.4;
  if ( ySmall > 1) {
    $('.navbar').css({"box-shadow": "0 2px 3px rgba(0,0,0," + shadowOpacity + ")"});
  } else {
    $('.navbar').css({"box-shadow": "none"});
  }
});