title: OnScroll Navbar modify in Bootstrap 3?
body: <p>I'm a student in university and wondering about what is the best solution for this use case that I'm wanting to use on a project:</p>
  
  <p>Standard <code>navbar navbar-default navbar-fixed</code> div  with a <code>nav navbar-nav navbar-right</code> div inside it. that has a logotype in left hand side <a href="http://www.bootply.com/8PW9UzYPOo" rel="nofollow">http://www.bootply.com/8PW9UzYPOo</a></p>
  
  <p>which on scroll is replaced with a <code>navbar-brand</code> element that contains the words of the logotype  <a href="http://www.bootply.com/Q3NXBLXWBN" rel="nofollow">http://www.bootply.com/Q3NXBLXWBN</a>. </p>
  
  <p>I think somehow that javascript would be the solution, but I'm not sure.</p>
  
  <hr>
  
  <p>Pseudo code</p>
  
  <pre><code>If scroll beyond x pixels
  hide logotype &lt;a&gt; link
  replace with text &lt;a&gt; link
  text as class="navbar-brand"
  </code></pre>
  
  <hr>
  
  <p>An example I've seen on another site, but it's a module of Drupal on this <a href="https://gfycat.com/UntriedPassionateAoudad" rel="nofollow">example</a> and the logo simply disappears rather than being replaced. </p>