becca becca - 11 months ago 48
HTML Question

Box pop up on scroll

Trying to figure out how I might go about adding a div at the bottom of a page that nicely scrolls up when you reach the bottom of the page. I want it hidden until I reach that div at the bottom, and i want it to nicely scroll up when I reach it, and nicely scroll back down when I scroll back up.

This is what I'm starting with:

if( $(document).scrollTop() > ) {
} else {

html { height: 2000px; } /* create a scrollbar for demo purposes */

#signup {
position: fixed;
top: 200px;
right: 50px;
display: none;

<div id="signup">Sign up!</div>

but I can't really seem to figure out where to go from here, and this isn't even doing much. TIA

enter image description here


You will need to check if the scrollvalue + window height are the same of the document; then two options to animate the box animate() with Jquery or use transition on CSS:

Check this example snippet:

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() == $(document).height()) {
  } else {
body {
  height: 1000px;
/* create a scrollbar for demo purposes */

#signup {
  position: fixed;
  width: 100%;
  bottom: -50px;
  height: 50px;
  left: 0;
  background-color: purple;
  transition: bottom .5s linear;
  color: white;
  font-size: 2em;
  text-align: center
} {
  bottom: 0;
<script src=""></script>
<div id="signup">Sign up!</div>