当相对元素击中固定元素底部时触发事件＆amp;滚动排名靠前？

Question

您能否请看下面的代码段，让我知道当nav个元素在滚动时点击#one的底部时，如何触发某个功能？

＆＃13;

＆＃13;

$(function() {
  
});

＆＃13;

body{
background:#eee;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以获得一个的位置+高度，并将其与两个的位置进行比较

$(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>