css - Position absolute just off the top of the screen

Question

I have this little modal that slides-in from the top of the page upon entering, and slides back out again when clicking on it.

My problem is that I don't want it to leave the page completely after clicking. I need to keep the bottom 32px of the modal showing at the top of the screen, so that the user can click it again, and it will slide back down. Furthermore, the modal itself is dynamic and changes height depending on the information passed into it.

My keyframes are these:

@keyframes slide-bottom {
  0% {
    top: -100%;
  }
  100% {
    top: 50%;
    transform: translateY(-50%);
  }
}

@keyframes slide-top {
  0% {
    top: 50%;
    transform: translateY(-50%);
  }
  100% {
    top: -100%;
    transform: translateY(32px);
  }
}

Thanks in advance!

question from:https://stackoverflow.com/questions/65897698/position-absolute-just-off-the-top-of-the-screen

Answer 1

The issue is with the 100% declarations, for slide-top.

100% {
    top : calc(-50% + 32px);
    transform : translateY(0%);
}

might fix the issue