#014 - 06/11/24

A happy accident

Here is something weird I discovered by accident. I was updating the layout for one of my pages, it had a sticky navbar, a background image and a fixed scrollable text window, I wanted to remove that and leave a simpler design. So I move a few things around in the CSS, tried it out, kept changing some things (Yes, 90% of what I "know" of web development only works by trial and error). Anyway, in testing the page on the browser in mobile display mode I happened to notice that the sticky navbar was hiding if I scrolled down a little. It first behaved as sticky, and then it would hide after scrolling down a certain distance.

"But how? I thought that needed JavaScript and all I have is a static page with HTML and CSS, not even particularly complicated CSS. Is it magic?" I thought to myself.

After poking around and wondering anxiously for a while why all the the other pages are not behaving like that, and googling and finding only answers that led me to JavaScript tutorials, I did manage to find the answer:

    body {
        height: 100vh;
        }
    header {
        position: sticky;
        top: 0;
        }
                

I realized the key is in both the body { height: 100vh; } and header { position: sticky; top: 0; }. If you set the body's height to anything else or use any unit other than vh or use a property for 'position' other than sticky, it doesn't work.

You can see the section on position here or the section on units here on my CSS Deep Dive for a bit more on those sujects.

Anyway, just wanted to share that while I continue to work on the revamping of the site's layout.