HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pageY vs clientY</title>
  <style>
    body { font-family: sans-serif; padding: 16px; min-height: 200vh; }
    #compare { position: fixed; top: 16px; left: 16px; background: #fff; padding: 12px 16px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
    p.hint { margin-top: 80px; color: #64748b; }
  </style>
</head>
<body>
  <div id="compare">Click anywhere after scrolling</div>
  <p class="hint">Scroll down, then click — pageY stays document-consistent; clientY is viewport-relative.</p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(document).on("click", function (event) {
      $("#compare").html(
        "pageY: " + event.pageY + " (document)<br>" +
        "clientY: " + event.clientY + " (viewport)"
      );
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery event.pageY — pageY vs clientY (Try It)