title: Change the logotype after scrolling
body: <p>What should I do to have such a thing? When I start scrolling I want the logotype (logo-white.jpg) in the .light-logo class to disappear as soon at it gets to navbar. And as soon as the scroll gets to navbar, a logotype (logo-dark.jpg) must appear there.</p>
  
  <p>My js knowledge is poor, so, please, I would really appreciate you detailed answer and explanations.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var navbarOffest = $(".navbar").offset().top;
  
    $(window).on("scroll", function() {
      var navbarHeight = $(".navbar").outerHeight();
  
      if ($(window).scrollTop() &gt;= navbarOffest) {
        $(".navbar").addClass("navbar-fixed-top");
        $("body").css("padding-top", navbarHeight + "px");
      } else {
        $(".navbar").removeClass("navbar-fixed-top");
        $("body").css("padding-top", "0");
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav.navbar {
      background: #fff;
      color: #1e1d1f;
      border-bottom: none;
      border-radius: 0;
      padding: 15px 0;
      -webkit-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
  }
  
  nav.navbar a.navbar-brand {
      color: #fff;
      font-weight: 600;
  }
      nav.navbar a.navbar-brand:hover,
      nav.navbar a.navbar-brand:focus {
          color: inherit;
      }
  
  
  nav.navbar .navbar-toggle {
      background: #fff;
      color: #333;
      border: none;
      border-radius: 0;
  }
      nav.navbar .navbar-toggle:hover,
      nav.navbar .navbar-toggle:focus {
          background: #fff;
          color: #333;
      }
  
  nav.navbar .navbar-collapse {
      border: none;
  }
  
  nav.navbar ul.navbar-nav {
      border: 2px solid #fff;
  }
  
  nav.navbar ul.navbar-nav a {
  color: #1e1d1f !important;
      font-family: 'Lato';
      text-transform: uppercase;
      font-weight: 900;
      font-size: 14px;
      letter-spacing: 0.3px;
  }
      nav.navbar ul.navbar-nav a:hover,
      nav.navbar ul.navbar-nav a:focus {
          color: #333;
          background: #fff;
      }
  
  .navbar .navbar-nav {
      display: inline-block;
      float: none;
  }
  
  .navbar .navbar-collapse {
      text-align: center;
  }
  
  .navbar {
      margin-bottom: 0;
  }
  
  
  /* Navbar Form */
  nav.navbar form.navbar-form input {
      border-radius: 0 ;
      border-color: #6172b9;
      background: none;
      color: #fff;
      font-weight: 300;
  }
  
  nav.navbar form.navbar-form button {
      background: #6172b9;
      color: #fff;
      border-color: #6172b9;
      border-radius: 0;
      box-shadow: none !important;
      outline: none;
  }
      nav.navbar form.navbar-form button:hover {
          background: #fff;
          color: #6172b9;
      }
  
  /* Navbar Button */
  nav.navbar button.navbar-btn {
      border-radius: 0;
      border-color: #6172b9;
      background: #6172b9;
      color: #fff;
  }
      nav.navbar button.navbar-btn:hover {
          background: #fff;
          color: #6172b9;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;section class="hero"&gt;
  &lt;div class="content"&gt;
  &lt;div class="container"&gt;
  
  &lt;div class="row light-logo"&gt;&lt;img src="assets/images/logo-white.png"&gt;   
  
  &lt;/div&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-12 text-center"&gt;
  &lt;div class="row"&gt;
  &lt;h1 class="hero-italic"&gt;Demo Title&lt;/h1&gt;
  &lt;h1 class="hero-regular"&gt;Description&lt;/h1&gt;
  &lt;p class="lead light"&gt;Subtitle with text&lt;/p&gt;
  &lt;a class="btn btn-danger" target="_self" href="#"&gt;View all services&lt;/a&gt; &lt;a class="btn btn-fill btn-light" target="_self" href="#"&gt;Start the conversation&lt;/a&gt;
  &lt;/div&gt;&lt;!--row-hero--&gt;    
  &lt;/div&gt;&lt;!-- col-7 --&gt;
  &lt;div class="col-md-12 col-md-5"&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;!-- row --&gt;
  &lt;/div&gt; &lt;!-- container --&gt;
  &lt;/div&gt; &lt;!-- content --&gt;
  &lt;/section&gt;&lt;!-- section --&gt;    
      
  &lt;header class="site-header" role="banner"&gt;
          &lt;nav class="navbar"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                  &lt;/div&gt;
                  &lt;div class="collapse navbar-collapse" id="exampleNavComponents"&gt;
  
  
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  &lt;/header&gt;    
  
  &lt;section id="main"&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="content"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-4 text-center"&gt;
                  &lt;div class="col-case equal"&gt;
                      &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
                      &lt;p&gt;Description.&lt;/p&gt;  
                      &lt;a href="" class="btn info"&gt;More&lt;/a&gt;   
                  &lt;/div&gt;
              &lt;/div&gt;
                          &lt;div class="col-md-4 text-center"&gt;
                  &lt;div class="col-case equal"&gt;
                      &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
                      &lt;p&gt;Description.&lt;/p&gt;  
                      &lt;a href="" class="btn info"&gt;More&lt;/a&gt;   
                  &lt;/div&gt;
                                      &lt;div class="col-md-4 text-center"&gt;
                  &lt;div class="col-case equal"&gt;
                      &lt;h2&gt;Lorem Ipsum&lt;/h2&gt;
                      &lt;p&gt;Description.&lt;/p&gt;  
                      &lt;a href="" class="btn info"&gt;More&lt;/a&gt;   
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section&gt; 
  &lt;p&gt;"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"&lt;/p&gt;
  &lt;p&gt;"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"&lt;/p&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>