How to make a navigation bar like this in Bootstrap?

Question

http://riotdesign.eu/en/

first it seems to be a default then it changes to fixed-top and there's an animation effect in between, seems to be done in CSS

my logic is using javascript to detect the window scroll bar's offset and toggle the navbar class attribute. Can it be done in this way?

I took a look at the original page's code, didn't get nothing cuz it's too messy. And the page is pretty laggy in my browser. I figure their solution may not be wise. So I came here. :)

Correct me if I'm wrong.

Answer 1

You can use Bootstrap's affix component to apply the CSS transition animation when the navbar affixes to the top...

Demo: http://bootply.com/133223

Answer 2

Yes it can be done that way. And you can add the animation by applying CSS3 transitions on the opacity attribute of the background element.