0
你可以看看下面的代码片段,让我知道如何在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>