I thought you were going to say the mistake was "using JavaScript" since any time after we started thinking about responsive / modern mobile design, both :target and :checked existed.

Aka, you don't need JavaScript for this. NOT IT'S JOB!!! Especially now that the "hidden" attribute is well supported. Either hash to it, or abuse a hidden INPUT checkbox with labels/for.

I've taken a different tack on small screen / hamburger menus in that I make them fully qualified modal dialogs.

This gives you an outer container you can fixed position over the content, that can have its own scrollbar to fit the screen. The big trick there is to make a second DIV around all your content -- aka anything that's not the modal -- and use it instead of BODY to create its scrollbar.

The outer container of the modal can consume the full screen, placing it OVER the sibling content DIV preventing you from having two scrollbars side-by-side, and preventing attempts at scrolling past the bottom from accidentally changing the focus from the modal to the underlying page, preventing scrolling.

With some creativity using hashes (if not conflicting with other page navigation) or abusing radio INPUT you can even make sub-menus their own separate modals you can drill-down through.