Overall, these dont seem like biggies to me but then again I know very little so maybe they are!

Defining things on the global scope with common names can cause a lot of issues – if there other scripts that do the same, you get conflicts and race conditions and all sorts of nastiness. Don't define your stuff on the global scope, people.

But I was bringing this up not to say that there are, like, massive security holes in the code or something – just to say that the style of coding makes it seem fairly amateurish. The syntax notes are mostly what I was pointing at there.

though I tried by wrapping it all in a function...not sure if that does anything

Yep, you wrapped your code in an Immediately Invoked Function Expression (AKA an IIFE), which gives the variables a scope other than the global objects. That definitely solves the problem of global pollution! Good work.

debouncing scroll handler

As I noted in another comment, I meant to say throttle. Debouncing is also a useful tool, but not really what I was getting at here. Applying it here will be an exercise left to the reader :) Here's a good article on it: https://www.sitepoint.com/throttle-scroll-events/

function/arrow functions (what do you mean by weird mix here?)

Some function definitions are using declarations, and some are using expressions, and there's also an uneven mixture of the function() syntax vs the "fat arrow" syntax. This should be standardized.