JSFiddle - React, Tailwind, and code Playground

by ifightcrime

HTML

<div id="stop-leaving">Stop leaving!</div>

CSS

body {
    height: 2000px;
}

#stop-leaving {
    position: fixed;
    top: 5px;
    display: none;
}

JavaScript

(function() {
  
  var current_scroll = 0;
  var last_mouse_y = null;

  $(document)
    .scroll(function() {
      current_scroll = $(this).scrollTop();
    })
    .mousemove(function(e) {
      var speed = last_mouse_y - e.pageY;
      var success_val = e.pageY - speed;
    
      if (success_val < last_mouse_y && success_val <= current_scroll) {
        $('#stop-leaving').show();
      } else {
        $('#stop-leaving').hide();
      }
      
      last_mouse_y = e.pageY;
    });
  
})();