<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section> <h1 class="target">Get ahead and try to leave</h1> </section> <section> <h1 class="target">Get ahead and try to leave</h1> </section> <section> <h1 class="target">Get ahead and try to leave</h1> </section> <section> <h1 class="target">Get ahead and try to leave</h1> </section>

html, body, section { min-height: 100vh; min-width: 100vw; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; } h1 { text-align: center; }

document.addEventListener('mouseleave', e => { var isLeaving = e.pageY - document.body.scrollTop; if (isLeaving <= 50) { // do something ... let elms = document.querySelectorAll('.target'); for (var i = elms.length - 1; i >= 0; i--) { elms[i].innerHTML = 'Welcome Back!' } } });