title: How to create a Bootstrap sticky nav that is below a marquee but then pinned to top after scrolling
body: <p>Using the bootstrap v3 framework  How do I create a Navigation header that is below or part of a jumbotron or large container (like a marquee image) but sticks to the top when user scrolls down?</p>
  
  <p>I started with the bootrap example and placed it below a marquee image.  However, how do you change to navbar-fixed-top and detect when user has scrolled to an appropriate position?</p>
  
  <p>Example:
  poolhousedigital.com</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- Main component for a primary marketing message or call to action --&gt;
    &lt;div class="jumbotron"&gt;
      &lt;div id="intro" class="container"&gt;
          &lt;h1&gt;Navbar example&lt;/h1&gt;
          &lt;p&gt;This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.&lt;/p&gt;
          &lt;p&gt;To see the difference between static and fixed top navbars, just scroll.&lt;/p&gt;
          &lt;p&gt;
              &lt;a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button"&gt;View navbar docs &amp;raquo;&lt;/a&gt;
          &lt;/p&gt;
  
      &lt;/div&gt; &lt;!-- /container --&gt;
  
    &lt;/div&gt; &lt;!-- /jumbotron --&gt;
    &lt;!-- Fixed navbar --&gt;
  &lt;div class="navbar navbar-inverse navbar-fixed" role="navigation"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;Project name&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="navbar-collapse collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li class="dropdown-header"&gt;Nav header&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> body {
    min-height: 2000px;
    padding-top: 0px;
      }
      .jumbotron {
      position: relative;
      background: none;
      padding: 0px;
      margin-bottom: 0px;
      min-height: 500px;
      }
      .jumbotron:after {
      content:"";
      background: url("img/2gratermay20121.jpg");
      background-repeat:no-repeat;
      background-position: 0% 0%;
      background-size: 100% 100%;
      opacity: 1;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: -1;
      }
  </code></pre>