I have successfully created a pop up that appears when the user reaches the bottom of the page.
Now, I am looking to implement a similar concept but have the pop up appear from the TOP of the page, at a specific location on the page instead of just top or bottom (specifically within a certain div).
This is how I am currently triggering the 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;
}
#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; }<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
<a class="btn btn-white btn-outline" href="#">Free Trial</a>
<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>Therefore, I am seeking guidance on how to modify this method to make a pop-up descend from the TOP at a specific point on the page. The intention is to display a new navigation bar once the user reaches a particular section. **I do not want to use a sticky div. My aim is for it to remain hidden until triggered, like the example I provided for the pop-up.
Example:
<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 slides down from the top.
</div>