Sticky sidebar that scrolls vertically when content overflows vertically

Desired UX:

JSFiddle: Link

HTML and CSS:

#body{    padding: 10px;    background-color: #eee;    width: 200px;    position: relative;  }    #toc-container{    font-size: 12px;    position: absolute;    top: 0;    right: -100px;    width: 100px;    border: 1px solid #eee;    height: 100%;      }    #toc{    position: sticky;    top: 0;    padding: 10px;  }

<div id="body">    <div id="toc-container">      <div id="toc">        <p>          This should scroll when you hover over it, and only when you hover over it.        </p>        <hr>        <p>TOC entries</p>      </div>    </div>    This should scroll whenever *not* hovering over the TOC / sidebar. <hr>  </div>

The challenge: The sidebar is vertically sticking, but is not scrolling on hover. How can the TOC be styled such that it sticks to the top edge of the viewport, and scrolls vertically only when scrolled directly, never when the body is scrolled?

https://stackoverflow.com/questions/67427730/sticky-sidebar-that-scrolls-vertically-when-content-overflows-vertically May 07, 2021 at 09:04AM