Sticky bars

HTML

<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js"></script>
<body>
<div id="page"> 
  <div class="fullscreen">
    <h1>Zone fullscreen</h1>
	</div>
  <header class="navbar1">
    <p>Navbar 1 : I am fixed but I want to stop just before Navbar2 !</p>
  </header>	
  <div id="content">
    <div class="navbar2">
     <p>Navbar 2 : I become sticky on scroll</p>
	</div><!--/navbarLoc-->
  <div class="main-content">
    <p>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.</p>
  </div><!--/content -->
</div><!--/page-->
</body>

CSS

* {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;}

JavaScript

$(".navbar2").stick_in_parent({offset_top:0});



function checkOffset() {
    if($('.navbar1').offset().top + $('.navbar1').height() >= $('.navbar2').offset().top - 10)
        $('.navbar1').css('position', 'absolute');
    if($(document).scrollTop() + window.innerHeight < $('.navbar2').offset().top)
        $('.navbar1').css('position', 'fixed'); // restore when you scroll up
    $('.navbar1').text($(document).scrollTop() + window.innerHeight);
}
$(document).scroll(function() {
    checkOffset();
});