CODEWITHSUNDEEP
javascriptjqueryhtmlcss
becca
becca

Reputation: 740

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

Upvotes: 2

Views: 8943

Answers (1)

DaniP
DaniP

Reputation: 38252

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>

Upvotes: 4

Related Questions