We'll use position: sticky to lock our sticky header to the content container that it's in when the user scrolls. Using a useEffect hook we can monitor the scroll position and determine if the user is looking at a section of our content. If they are we can update a useState hook to highlight it in our nav bar. Finally we'll add a scroll to section feature as well.

We'll build a circular progress button to show how far a user has read an article. The techniques will rely on stroke-dasharray and stroke-dashoffset. Using the useLayoutEffect hook and useRef hook we will measure our article height dynamically and calculate progress based upon the scroll position. We'll show how to dynamically calculate all necessary values to render our progress circle exactly where we want it.

We'll explore how to use Unified, Remark, Rehype, and PrismJS to create markdown code that is capable of being syntax highlighted. The generated code will be React elements instead of a string of HTML. This adds in the security benefits of React when it comes to rendering untrusted markdown content.