What does navbar-static-top do in Bootstrap 3?

Question

According to the documentation of the Bootstrap 3's navbar static-top,

Static top Create a full-width navbar that scrolls away with the page by adding .navbar-static-top and include a .container or .container-fluid to center and pad navbar content.

Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.

what does this method do? The above documentation looks like to me that the navbar is fixed at the top of the screen even when I scroll down the page to the bottom. However, it's what .navbar-fixed-top does, and when I used .navbar-fixed-top in my app, it works exactly what I've mentioned.

However, when I wrote .navbar-static-top in my app, I don't know what makes it different from just the .navbar-default. Anyone can help me in clarifying the difference and what the .navbar-static-top do?

Answer 1

navbar-static-top removes the left,right and top border created by navbar-default so that it looks better at the top of the page, whereas you might want to use just navbar-default elsewhere on the page...

navbar-static-top: http://bootply.com/129342

On the other hand, navbar-fixed-top uses position:fixed. If there is content on the page that extends below the viewport (as there is on most pages) the navbar-fixed-top will remain stuck to the top, whereas the navbar-static-top will scroll away. Since the navbar-fixed-top is fixed, it requires the body to have padding-top so that it doesn't overlay page content...

navbar-fixed-top: http://bootply.com/129345

As you can see when you scroll down in each example the top navbar responds differently.