Trigger event when a relative element hits fixed element bottom & top on scroll?

$(function() {
  $(window).scroll(function() {

    var posOne = $('#one').height() + $('#one').offset().top;
    if (posOne >= $('#two').offset().top) {
      alert("bingooooooo");
    }

  });
});

body {
  background: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-default navbar-fixed-top" id="one">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">One</a>
    </div>
  </div>
</nav>
<div class="container-fluid" style="height:300px;"></div>
<nav class="navbar navbar-default" id="two">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Two</a>
    </div>
  </div>
</nav>
<div class="container-fluid" style="height:300px;"></div>
<nav class="navbar navbar-default" id="three">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Three</a>
    </div>
  </div>
</nav>
<div class="container-fluid" style="height:300px;"></div>
<nav class="navbar navbar-default" id="four">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Four</a>
    </div>
  </div>
</nav>
<div class="container-fluid" style="height:300px;"></div>
<nav class="navbar navbar-default" id="five">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Five</a>
    </div>
  </div>
</nav>
<div class="container-fluid" style="height:300px;"></div>