It’s about sticky navigation bar most modern web pages bother to have. Here’s the demo.

First thing first, we have to determine the distance of navigation bar relative to its parent (html tag). After that, stick the navigation bar at the point where the top edge of the current viewport (an area to display the web content in the browser) touches or passes through the top of navigation bar. In other words, the gap between the top edge of the page and navigation bar has been passed through (hidden because we scroll down the scroll bar).

The only thing left is adding approriate CSS to style the sticky bar. Here’s how I do that.

Here’s the markup.

It’s very common to see a logo slide in after the top edge of the current viewport touched or passed through the navigation bar. How about adding more useless feature to our existing code?

Be careful! Once you decide to fix the block-level element’s position relative to the viewport, the area that element previously took up before being fixed will vanish. We have to add padding to its parent element, so the place where the navigation bar left would be filled appropriately.

That’s it for today. I think I kind of miss メリー メディオーアティ.