becca becca - 4 months ago 12
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

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>

Comments