It’s about sticky navigation bar most modern web pages bother to have. Here’s the
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 メリー メディオーアティ.