Parallax эффект перемещение логотипа на Bootstrap

При скроллинге страницы логотип, изначально находящийся в контейнере перемещается в меню находящееся в топе сайта, это простой параллакс эффект для Bootstrap.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- Latest compiled and minified jаvascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<script type='text/jаvascript' src='https://code.jquery.com/jquery-1.10.1.js'></script>

<style>
 .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) {
 .navbar-inverse .navbar-collapse,
 .navbar-inverse .navbar-form {
 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;
 }
 
 .small-logo-container {
 padding-top: 50px;
 height: 50px;
 overflow: hidden;
 }
 
 .small-logo {
 color: white;
 font-size: 2.5em;
 padding-bottom: 2px;
 }
 
 .big-logo-row {
 background: gold;
 }
 
 .big-logo-row .big-logo-container {
 padding-top: 50px;
 }
 
 .big-logo-row h1 {
 font-size: 4em;
 margin: 0;
 padding: 0 0 15px 0;
 }
 
 @media (min-width: 400px) {
 .big-logo-row h1 {
 font-size: 4.5em;
 }
 }
 
 @media (min-width: 440px) {
 .big-logo-row h1 {
 font-size: 5.5em;
 }
 }
 
 @media (min-width: 500px) {
 .big-logo-row h1 {
 font-size: 6.5em;
 }
 }
 
 @media (min-width: 630px) {
 .big-logo-row h1 {
 font-size: 7.5em;
 }
 }
 
 @media (min-width: 768px) {
 .big-logo-row h1 {
 font-size: 9em;
 padding-bottom: 30px;
 }
 }
 
 @media (min-width: 1200px) {
 .big-logo-row h1 {
 font-size: 12em;
 }
 }
</style>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 <div class="container">
 <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="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <div class="small-logo-container">
 <a class="small-logo" href="#">↥Логотип</a>
 </div>
 </div>
 <div class="navbar-collapse collapse">

 <ul class="nav navbar-nav navbar-right">
 <li class="active"><a href="/">Главная</a></li>
 <li><a href="#">Ссылка</a></li>
 <li><a href="#">Ссылка</a></li>
 <li><a href="#">Ссылка</a></li>
 </ul>
 </div>
 <!--/.nav-collapse -->
 </div>
</div>

<div class="container-fluid big-logo-row">
 <div class="container">
 <div class="row">
 <div class="col-xs-12 big-logo-container">
 <h1 class="big-logo">↧ Логотип</h1>
 </div>
 <!--/.col-xs-12 -->
 </div>
 <!--/.row -->
 </div>
 <!--/.container -->
</div>
<!--/.container-fluid -->

<div class="container">
 <div class="row">
 <div class="col-lg-5 col-md-6 col-sm-8">
 <h2>Текст для примера</h2>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 <p>Здесь много много текста для демонстрации примера</p>
 </div>
 <!--/.col-xs-12 -->
 </div>
 <!--/.row -->
</div>
<!--/.container -->
<script>
 $(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"
 });
 }
 });
</script>

Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию. Это займёт не более минуты. Не волнуйтесь, мы не спамим!