Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Sadly not quite yet. With CSS Anchor positioning, something like this is possible, but cross-browser support isn't really there yet. Firefox, and current versions of Safari, don't support it, but they're tracking it, so maybe soon

But the actual Javascript isn't all that complex. It basically just checks that the site satisfies a min-width media query, then calculates the top position of the superscript links, and sets a css custom property to store that value. The CSS then uses a mix of media queries, js-controlled data- properties, and absolute positioning to move the body of the footnotes out of the footer and into the sidebar. If JS doesn't load, then nothing happens, and they remain at the bottom of the site.

The JS involved is at https://github.com/paradox460/pdx.su/blob/main/assets/js/sid...

The CSS that affects them is https://github.com/paradox460/pdx.su/blob/main/assets/css/ge... (there's also a small query that makes the parent paragraph of a superscript flash when you return to it, using has queries)



Thanks for sharing! I'm far from a JS expert but might have to try something similar... so the snippets you shared are super helpful :)




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: