相対要素がスクロールで固定要素の下＆上にぶつかったときのトリガーイベント？

Question

スニペットをご覧になり、nav要素のいずれかがスクロールの#oneの下部に当たると、どのように機能をトリガーできるのか教えてください。

$(function() { 
 
    
 
});

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>

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>

の位置と比較することができます