Bootstrap Snippet Detect a mouse leaving a page by moving up to the address bar using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
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;
  }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
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!'
    }
  }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Detect a mouse leaving a page by moving up to the address bar"
Bootstrap 4.1.1 Snippet by locvfx

Related: See More

Questions / Comments:

"Detect a mouse leaving a page by moving up to the address bar" Bootstrap 4.1.1 Snippet by locvfx

Related: See More

Questions / Comments:

"Detect a mouse leaving a page by moving up to the address bar"
Bootstrap 4.1.1 Snippet by locvfx