A bookmarklet to kill sticky headers (2013)

I have a (badly made) variant of kill sticky that I use on my phone. It kills sticky, then messes with any code blocks it finds to make them full width and use a smaller font.

It drives me mad when I'm reading articles with embedded code blocks where the code has less room than the prose and sometimes a bigger font!

It works well on eg this page (https://www.programiz.com/swift-programming/inheritance), but maybe someone that knows what they're doing can make it work on GitHub. It'd be nice to not see those line numbers taking up half the width.

I'm on my phone so I've only the bookmarklet to hand:

   javascript:(function()%7Bvar%20i%3Bvar%20b%3Ddocument.querySelectorAll(%22body%20*%22)%3Bfor(i%3D0%3Bi%3Cb.length%3Bi%2B%2B)%7Bvar%20el%3Db%5Bi%5D%3Bif(getComputedStyle(el).position.match(%2Ffixed%7Csticky%2Fgi))%7Bel.parentNode.removeChild(el)%3B%7D%7Dconst%20c%3Ddocument.querySelectorAll(%22html%22)%3Bfor(i%3D0%3Bi%3Cc.length%3Bi%2B%2B)%7Bif(%22hidden%22%3D%3D%3DgetComputedStyle(c%5Bi%5D).overflow)%7Bc%5Bi%5D.style.setProperty('overflow'%2C%22scroll%22%2C%22important%22)%3B%7D%7D%7D)()%3B(function()%7Bvar%20i%2Cj%2Cb%3Ddocument.querySelectorAll(%22pre%22)%3Bfunction%20setPropertiesOuter(el)%7Bel.style.setProperty('margin-left'%2C%22calc(-50vw%20%2B%2050%25)%22%2C%22important%22)%3Bel.style.setProperty('margin-right'%2C%22calc(-50vw%20%2B%2050%25)%22%2C%22important%22)%3Bel.style.setProperty('font-size'%2C%2211px%22%2C%22important%22)%3Bel.style.setProperty('text-indent'%2C%220%22%2C%22important%22)%3Bel.style.setProperty('border-left-width'%2C%220%22%2C%22important%22)%3Bel.style.setProperty('border-right-width'%2C%220%22%2C%22important%22)%3Bel.style.setProperty('border-radius'%2C%220%22%2C%22important%22)%3Bel.style.setProperty('padding'%2C%2210px%22%2C%22important%22)%3Bel.style.setProperty('width'%2C%22100vw%22%2C%22important%22)%3Bel.style.setProperty('max-width'%2C%22100vw%22%2C%22important%22)%3B%7Dfunction%20setPropertiesInner(el)%7Bel.style.setProperty('font-size'%2C%2211px%22%2C%22important%22)%3Bel.style.setProperty('text-indent'%2C%220%22%2C%22important%22)%7Dfor(i%3D0%3Bi%3Cb.length%3Bi%2B%2B)%7Bconst%20el%3Db%5Bi%5D%3BsetPropertiesOuter(el)%3Bvar%20descendants%3Del.querySelectorAll(%22*%22)%3Bfor(j%3D0%3Bj%3Cdescendants.length%3Bj%2B%2B)%7BsetPropertiesInner(descendants%5Bj%5D)%7D%7D%7D)()

These things are so annoying. Is there a website benchmark not for speed, not for security but for "annoyingness"? I guess there is some overlap with accessibility, but that's not exactly what I'm thinking of.

I asked Copilot and searched Google but couldn't really come up with anything.

Anecdote: I was in charge of a complete rebuild for an e-commerce website a few years back, which included a new design. We were debating various layout options, as it was tricky to get the information hierarchy right and show everything necessary even on smaller screens. Then we had an internal review and the CEO complicated things considerably by insisting it was very important that the header be sticky --- to ensure that the company logo would always remain visible even when scrolling, reminding users of our brand.

Dont hate me, but I would like to have the opposite functionality

Just for mobile, where it is very annoying on long pages (Laravel Docs for example) to scroll up just to get the menue button.

I'm not seeing any way to browse them either. I'd love such a feature.