Show Pop-up when user approaches browser address bar

Question

I own a Pop-up that opens whenever the site opens. However, I would like to change. I want the Pop-up to open whenever the user approaches the mouse cursor to the browser address bar.

if ($('.popup-banner').length > 0) {
  $('.popup-overlay, .popup-banner').delay(400).fadeIn(300);

  $('.popup-banner .fechar, .popup-banner .link-fechar, .popup-overlay').click(function() {
    $('.popup-overlay, .popup-banner').fadeOut(300);
  });
}

.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.75);
}

.popup-banner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  width: 650px;
  height: 350px;
  margin: -175px 0 0 -325px;
  background: #1c3d93 url(/assets/images/layout/bg-banner-popup.png?v2) center center no-repeat;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
  z-index: 9001;
}

.popup-banner h5 {
  color: #fff;
  font: 500 16px/24px 'Montserrat', Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  margin: 0;
  padding: 50px 60px 0;
  text-align: center;
  text-shadow: 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.popup-banner h5 strong {
  color: #ffb82e;
  display: block;
  margin: 0 0 10px;
  font: 700 34px 'Montserrat', Arial, Helvetica, sans-serif;
}

.popup-banner form {
  margin: 0 auto;
  padding: 0;
  padding: 20px 40px;
  text-align: center;
}

.popup-banner .mailing {
  background: #fff;
  border: 0;
  border-radius: 50px;
  color: #555;
  display: inline-block;
  font: 500 12px/46px 'Montserrat', Arial, Helvetica, sans-serif;
  height: 46px;
  margin: 0;
  outline: none;
  margin: 0 5px;
  padding: 0 20px;
  width: 46%;
  text-transform: none;
  outline: none;
}

.popup-banner .btn-ok {
  background: #2b2525;
  border-radius: 50px;
  border: 0;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  color: #fff;
  height: 46px;
  font: 700 22px/46px 'Montserrat', Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  margin: 10px 0;
  width: 95%;
  outline: none;
}

.popup-banner a {
  display: block;
  color: #fff;
  font-size: 10px;
  text-decoration: none;
  margin: 10px 0 0;
}

.popup-banner span.fechar {
  content: "X";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
  color: #fff;
}

<?php
    if($showPopup != 'no') {
?>
  <div class="popup-overlay"></div>
  <div class="popup-banner">
    <span class="fechar">
        <i class="fa fa-times"></i>
    </span>
    <h5>
      <strong>10% de desconto</strong> Cadastre em nosso e-mail marketing e <br>receba um cupom de 10% de desconto para a sua <br>primeira compra em nossa loja virtual!<br>
    </h5>
    <form action="/newsletter" method="post">
      <input type="text" class="mailing" name="nome" placeholder="Digite seu nome" required>
      <input type="text" class="mailing" name="email" placeholder="Digite seu e-mail" required>
      <input type="hidden" name="source" value="Cupom 10% - Cadastro">
      <input type="submit" class="btn-ok" name="btn-ok" value="Ok">
      <a class="link-fechar" href="#">Já sou cadastrado!</a>
    </form>
  </div>
  <?php
    }
?>

Answer 1

Capture the firing position by 'Mousemove', check the value of Y, compare with distance you want:

$(window).on("mousemove",function(event) {
    var y = event.pageY;
    if(parseInt(y) < parseInt(20)){
        console.log(y);
    }
});

You just have to make sure you don’t shoot 100% of the time or the way you want it to go off.

Example in the fiddle: https://jsfiddle.net/AnthraxisBR/1dt991nr/ (hover your mouse over the response window with the console open)