Drop-down from top of page at div

Question

I have this pop up created that pops up when you scroll to the bottom of the page.

I want to take the same idea but have it pop down from the TOP of the page, and at a specific point on the page (not at the top or bottom, but at a certain div).

Here's the way I am currently creating this pop up:

 $(window).scroll(function() { if ($(window).scrollTop() + $(window).height() == $(document).height()) { $('#signup').addClass('show') } else { $('#signup').removeClass('show') } }); $('#signup').on('click', '.close', function(e) { e.preventDefault(); $('#signup').removeClass('show') }) 

 /* popup at end of page */ body { height: 1000px; } /* create a scrollbar for demo purposes */ #signup { position: fixed; z-index:100; width: 100%; bottom: -50px; height: 50px; left: 0; background-color: green; transition: bottom .5s linear; color: white; font-size: 2em; text-align: center } #signup.show { bottom: 0; } html { height: 2000px; } /* create a scrollbar for demo purposes */ 

 <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="signup" class="signup"> <div class="container"> <p class="text-xlg text-center"> Don't have an account yet? Get started here &nbsp; <a class="btn btn-white btn-outline" href="#">Free Trial</a> &nbsp; <a class="btn btn-white btn-outline" href="#">Contact Us</a> </p> <a href="#" class="close"><i class="fa fa-times text-white"></i></a> </div> </div> 

So, how can I manipulate this same method to cause a pop-up to drop from the TOP at a certain point in the page. The goal is to create a new nav once you're at a certain spot. **I do not want to create a sticky div. I don't want it to be shown on the screen at all, similar to the pop-up example i included.

ex:

<nav>
  Here is the static nav bar
</nav>
<div>
  Likely a banner in here
</div>
<div class="new-nav">
  Once scrolled to this point, new nav pop up slides down from top.
</div>

Answer 1

Here is the changed snippet and below it is an explanation of what was changed.

 $(window).scroll(function() { if ($(window).scrollTop() >= ($(document).height() / 4)) { $('#signup').addClass('show') } else { $('#signup').removeClass('show') } }); $('#signup').on('click', '.close', function(e) { e.preventDefault(); $('#signup').removeClass('show') }) 

 /* popup at end of page */ body { height: 1000px; } /* create a scrollbar for demo purposes */ #signup { position: fixed; z-index: 100; width: 100%; top: -60px; height: 50px; left: 0; background-color: green; transition: top .5s linear; color: white; font-size: 2em; text-align: center } #signup.show { top: 0; } html { height: 2000px; } /* create a scrollbar for demo purposes */ 

 <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="signup" class="signup"> <div class="container"> <p class="text-xlg text-center"> Don't have an account yet? Get started here &nbsp; <a class="btn btn-white btn-outline" href="#">Free Trial</a> &nbsp; <a class="btn btn-white btn-outline" href="#">Contact Us</a> </p> <a href="#" class="close"><i class="fa fa-times text-white"></i></a> </div> </div> 

So to do this a few CSS changes were made:

#signup {
  position: fixed;
  z-index: 100;
  width: 100%;
  top: -60px;
  height: 50px;
  left: 0;
  background-color: green;
  transition: top .5s linear;
  color: white;
  font-size: 2em;
  text-align: center
}
#signup.show {
  top: 0;
}

The CSS that positioned the element at the bottom was changed to top and the animation location was changed so it transitions from the top .

The only other change was in the javascript:

if ($(window).scrollTop() >= ($(document).height() / 4)) {

The conditional was changed so that it shows the drop down when the scroll bar is more than a quarter down the screen and keep it there unless the user scroll back above this.

Answer 2

You can check when the scroll-y position is greater then or equal to the top position of the target element.

$(this).scrollTop() >= $('.new-nav').position().top

Example

I created a jQuery plugin to make it easier to reuse this functionality.

 (function($) { $.fn.onScrollTo = function(focusInFn, focusOutFn) { var $this = this; $(document).scroll(function() { var y = $(this).scrollTop(); if (y >= $this.position().top) { if (focusInFn) focusInFn(); } else { if (focusOutFn) focusOutFn(); } }); } })(jQuery); $('.new-nav').onScrollTo(function() { $('#signup').addClass('show'); }, function() { $('#signup').removeClass('show'); }); $('#signup').on('click', '.close', function(e) { e.preventDefault(); $('#signup').removeClass('show'); }) 

 .container { position: relative; } /* create a scrollbar for demo purposes */ #signup { position: fixed; z-index:100; width: 100%; height: 80px; top: -80px; left: 0; background-color: green; transition: top 0.67s linear; color: white; font-size: 2em; text-align: center } #signup.show { top: 0; } #signup .close { position: absolute; top: 0.25em; right: 0.125em; } #signup p { margin-top: 0.125em; line-height: 1.25em; } nav { text-align: center; font-size: 1.25em; margin: 0.25em; } .banner { text-align: center; font-size: 2em; margin: 1em; } .new-nav { height: 800px; padding: 0.5em; } .text-white { color: #FFFFFF; } 

 <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav> Here is the static nav bar </nav> <div class="banner"> Likely a banner in here </div> <div class="new-nav"> Once scrolled to this point, new nav pop up slides down from top. </div> <div id="signup" class="signup"> <div class="container"> <p class="text-xlg text-center"> Don't have an account yet? Get started here<br /> <a class="btn btn-white btn-outline" href="#">Free Trial</a> &nbsp; <a class="btn btn-white btn-outline" href="#">Contact Us</a> </p> <a href="#" class="close"><i class="fa fa-times text-white"></i></a> </div> </div>