How do I make a div follow while scrolling, but hide on click?

I'm trying to have a div scroll up when the user moves down, and then, if they close the div, it should stay hidden.

The scrolling works fine, but I can't figure a way to stop it from re-appearing after a user hides the div then srcolls again.

I've moved the part where it hides the div when true, to an else-if statement. But the else-if statement isn't working.

If it did, how do I make sure, that it sticks, and doesn't look back if a user starts scrolling?

My code right now

$('body').prepend('<div id="mydiv"></body>');

$(document).ready(function() {
  $('#mydiv').delay(2000).animate({
    top: "100"
  }, "fast", "linear")
});

var hide = false;

$("#hide-mydiv").click(function() {
  hide = true;
});

if (hide == false) {

  $(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y <= 0) {
      $('#mydiv').stop().animate({
        top: "100"
      }, 0);
    } else {
      $('#mydiv').stop().animate({
        top: "50"
      }, 0)
    }
  });
  elseif (hide == true)
    $('#mydiv').animate({
      top: "-100"
    }, "fast", "linear")
  }