1

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>
becca
  • 720
  • 1
  • 9
  • 24
  • Possible duplicate of [Show div on scrollDown after 800px](http://stackoverflow.com/questions/15798360/show-div-on-scrolldown-after-800px) – Mr. Polywhirl Jan 23 '17 at 16:07
  • That answer looks like it is achieving the same result i have already created. I am not trying to get a sticky menu either. – becca Jan 23 '17 at 16:09

2 Answers2

2

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.

Callum
  • 845
  • 11
  • 22
  • Quick question - I wanted to change how big the pop down was, so i adding some padding, but this causes it to show when you're at the top of the page. What can be done to change the size without it showing at the top? – becca Jan 23 '17 at 16:46
  • 1
    You just will need to lower the `top: -60px;` in the CSS this is what hides the pop down off screen, because its now bigger you need to hide it further of screen. – Callum Jan 23 '17 at 16:48
1

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>
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132