title: Stop top-fixed element when reach div
body: <p>I have a page with 2 navbars.
  The first one is fixed at the top of the page.
  The second, in the middle of the page, become "top-sticky" when I scroll.</p>
  
  <p>I would like to stop the 1st navbar just before reaching the 2nd.
  So that when you scroll after the 2nd navbar, only this one is visible, the 1st stays upper/ disappear.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/helloducoux/jegqyrb1/1/" rel="nofollow">Fiddle</a></p>
  
  <p>My html :</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="page"&gt; 
    &lt;div class="fullscreen"&gt;
      &lt;h1&gt;Zone fullscreen&lt;/h1&gt;
      &lt;/div&gt;
    &lt;header class="navbar1"&gt;
      &lt;p&gt;Navbar 1 : I am fixed but I want to stop just before Navbar2 !&lt;/p&gt;
    &lt;/header&gt; 
    &lt;div id="content"&gt;
      &lt;div class="navbar2"&gt;
       &lt;p&gt;Navbar 2 : I become sticky on scroll&lt;/p&gt;
      &lt;/div&gt;&lt;!--/navbarLoc--&gt;
    &lt;div class="main-content"&gt;
      &lt;p&gt;Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.&lt;/p&gt;
    &lt;/div&gt;&lt;!--/content --&gt;
  &lt;/div&gt;&lt;!--/page--&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS : </p>
  
  <pre><code>* {padding:0; margin:0;}
  html, body, #page {height:100%;}
  
  .fullscreen {height: 100%;background: red;position:relative; z-index:5;}
  .fullscreen h1 {padding-top:180px;text-align:center;}
  
  .navbar1 {position: fixed; left: 0; right: 0; top:10px;background:yellow;padding:5px;z-index:15;}
  .navbar2 {background:green;padding:5px;z-index:20;}
  
  .main-content {padding:10px;position:relative; z-index:10;}
  .main-content p {font-size:50px;}
  </code></pre>
  
  <p>And JS :</p>
  
  <p>This is for making Navbar2 sticky :</p>
  
  <pre><code>$(".navbar2").stick_in_parent({offset_top:40});
  </code></pre>
  
  <p>And I found this piece of code, to make the navbar1 absolute when reach Navbar2, doesnt work :</p>
  
  <pre><code>function checkOffset() {
      if($('.navbar1').offset().top + $('.navbar1').height() &gt;=     $('.navbar2').offset().top - 10)
          $('.navbar1').css('position', 'absolute');
      if($(document).scrollTop() + window.innerHeight &lt;    $('.navbar2').offset().top)
      $('.navbar1').css('position', 'fixed'); // restore when you scroll up
      $('.navbar1').text($(document).scrollTop() + window.innerHeight);
  }
  $(document).scroll(function() {
      checkOffset();
  });
  </code></pre>
  
  <p>And maybe the best solution would be to add/remove a class instead of directly applying CSS ?</p>
  
  <p>Any idea ?</p>
  
  <p>Thanks in advance for your reply !</p>