syntax-fm-sticky-show-notes.user.js

// ==UserScript==
// @name         Syntax.FM - Sticky Show Notes
// @namespace    salembeats
// @version      1.2
// @description  UPDATE: Reset scroll position when show notes change.
// @author       Cuyler Stuwe (salembeats)
// @include      https://syntax.fm/*
// @grant        none
// ==/UserScript==

const topOffset = "102px";

const showNotesEl = document.querySelector(".showNotes");

showNotesEl.style = `
    position: sticky;
    top: ${topOffset};
    height: calc(100vh - ${topOffset});
    overflow-y: scroll;
`;

new MutationObserver(mutations => {
    showNotesEl.scrollTop = 0;
}).observe(showNotesEl, {childList: true, subtree: true});

Problem

On Syntax.FM's website, it is incredibly tedious to see show notes for old episodes.

This is what you see when you scroll to an old episode:

The problem is caused by the list of show notes and the list of episodes scrolling simultaneously with one another (sharing a single scroll bar).

Solution

This userscript adds a handful of styles to the show notes div so that it has its own independent scroll bar, and follows the page as it scrolls.

Here's what the same episode looks like with this userscript enabled:

1.1:

Fix include path, so that the script always triggers when necessary.

1.2:

Reset scroll position when show notes change.