18

18Sticky navigation

Sticky navigation

Sticky navigation is what you get when you sneeze on your steering wheel.

It’s also a reference to navigation bars that stick to some point on the screen and remain fixed there while the rest of the web page scrolls past underneath it.

The easiest way is to look at it on the web page, go to 99-00-typicals and it starts with the navigation bar at the top of the screen (Figure 18.1), this is the basic navigation bar we built in § 11.3:

Figure 18.1 - Web page with navigation bar at the top
Figure 18.1   Web page with navigation bar at the top

If you slowly scroll down the page, the navigation bar disappears off the top (Figure 18.2):

Figure 18.2 - Web page with navigation bar scrolled off the top
Figure 18.2   Web page with navigation bar scrolled off the top

But then, if you keep scrolling down it comes back again (with an extra button) and sits there at the top of the screen (Figure 18.3):

Figure 18.3 - Web page with “sticky” navigation bar
Figure 18.3   Web page with “sticky” navigation bar

This last part is the sticky navigation and that is the bit we are going to build in this section.



End flourish image