[英]Trigger Event When A Relative Element Hits Fixed Element Bottom & Top on Scroll?
您能否看一下以下片段,讓我知道當nav
元素中的任何一個#one
滾動條上#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>
你可以得到一個位置+高度並將其與兩個位置比較
$(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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.