<div id="root">
  <div id="artboard">
    <h1>Text inside the artboard</h1>
  </div>

  <div id="overlay">I am a sticky overlay</div>
</div>

body {
  margin: 0;
  font-family: sans-serif;
}

#root {
  height: 100vh;
  position: relative;
  background: #dfdfdf;
  overflow: hidden;
}

#artboard {
  background: white;
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px 0 #b6b6b6;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

h1 {
  margin: 0;
  text-align: center;
}

#overlay {
  position: absolute;
  background: black;
  color: white;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-align: center;
  top: 0;
  left: 0;
  padding: 0.5rem;
  box-sizing: border-box;
}

#overlay:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #000000 transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

import {
  createArtboard,
  dom,
  mouse,
  wheel,
  touch,
  sticky,
  raf
} from "https://esm.sh/artboard-deluxe";

const rootElement = document.getElementById("root");
const artboardElement = document.getElementById("artboard");
const artboard = createArtboard(rootElement, [
  dom({
    element: artboardElement,
    setInitTransformFromRect: true
  }),
  wheel({
    useMomentumScroll: true,
    useMomentumZoom: true
  }),
  mouse(),
  touch(),
  sticky({
    target: document.getElementById("overlay"),
    position: "top-center",
    origin: "bottom-center",
    keepVisible: true,
    margin: 18
  }),
  raf()
]);