CODEWITHSUNDEEP
javascriptjquery
Behseini
Behseini

Reputation: 6330

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

How can I trigger a function when any of nav elements hits the bottom of #one on scroll?

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

Upvotes: 0

Views: 67

Answers (1)

Chiller
Chiller

Reputation: 9738

you can get position + height of one and compare it with position of two

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

Upvotes: 1

Related Questions