<section id="sticky-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam Pyrrho, Aristo, Erillus iam diu abiecti. Graece donan, Latine voluptatem vocant. Audeo dicere, inquit.</p>
  <div id="sticky"></div>
  <p id="second-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam Pyrrho, Aristo, Erillus iam diu abiecti. Graece donan, Latine voluptatem vocant. Audeo dicere, inquit. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam Pyrrho, Aristo, Erillus iam diu abiecti. Graece donan, Latine voluptatem vocant. Audeo dicere, inquit. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam Pyrrho, Aristo, Erillus iam diu abiecti. Graece donan, Latine voluptatem vocant. Audeo dicere, inquit. </p>
</section>
<div class="learning">
  <button id="wrap">Wrap element</button>
  <button id="unwrap">Unwrap element</button>
</div>
<article>
  <ul aria-label="Learning position sticky">
    <li>When you define an element with <code>Position: sticky</code>, you're automatically defining the parent element as sticky container.</li>
    <li>Remember that the container is the scope of the sicky item, and the item can't escape out of it.</li>
    <li>And if you <strong>wrap the sticky item</strong> with another block level container, for e.g. <code>div</code>, it will stop sticking </li>
    <li>Click wrap or unwrap button to see how the behaviour differs.</li>
  </ul>
</article>
#sticky-container {
  block-size: min(100vh, 200px);
  inline-size: min(50vw, 500px);
  margin-inline: auto;
  border: 2px solid;
  background: tomato;
  display: flex;
  flex-direction: column;
  place-items: center;
  font-family: blokk;
  overflow-y: auto;
}

#sticky {
  block-size: 50px;
  inline-size: 50px;
  border: 2px solid;
  background: dodgerblue;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
}

/** Cosmetic Stylings **/
code {
  color: tomato;
}

.learning {
  display: flex;
  place-items: center;
  justify-content: space-evenly;
  margin-block-start: 20px;
  flex-wrap: wrap;
}

button {
  padding-inline: 0.5rem;
  padding-block: 0.15rem;
  font-size: inherit;
  border: none;
  border-radius: 4px;
}
button:hover {
  color: white;
  background-color: dodgerblue;
}
button:is(:focus, :active) {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  transition: outline-offset 0.1s ease-in;
}

html {
  font-size: 125%;
  font-family: Tahoma;
}

const btn = document.getElementById("wrap");
const stickyElm = document.getElementById("sticky");

document.addEventListener("click", (e) => {
  const shouldWrap = e.target.getAttribute("id") === "wrap";

  if (shouldWrap) {
    const wrapperElm = document.createElement("div");
    const secondPara = document.getElementById("second-para");
    stickyElm.parentNode.insertBefore(wrapperElm, secondPara);
    return wrapperElm.appendChild(stickyElm);
  }

  // Only unwrap when wrapper element is a 'div'
  if (stickyElm.parentNode.tagName === "DIV") {
    unwrap(stickyElm.parentNode);
  }
});

function unwrap(wrapper) {
  // place childNodes in document fragment
  var docFrag = document.createDocumentFragment();
  while (wrapper.firstChild) {
    var child = wrapper.removeChild(wrapper.firstChild);
    docFrag.appendChild(child);
  }

  // replace wrapper with document fragment
  wrapper.parentNode.replaceChild(docFrag, wrapper);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.