becca becca - 1 year ago 61
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:



$(window).scroll(function(){
if( $(document).scrollTop() > ) {
$('#signup').show();
} else {
$('#signup').hide();
}
});

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

#signup {
position: fixed;
top: 200px;
right: 50px;
display: none;
background-color:purple;
}

<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

Answer Source

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()) {
    $('#signup').addClass('show')
  } else {
    $('#signup').removeClass('show')
  }
});
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: purple;
  transition: bottom .5s linear;
  color: white;
  font-size: 2em;
  text-align: center
}
#signup.show {
  bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="signup">Sign up!</div>