"Animation" in a navigation bar with Bootstrap 3

Question

Below is my code and I'm trying to recreate this effect: (http://hideo-html5-css3-bootstrap-website-template.little-neko.com/files/index.html) [When you scroll down the navigaiton bar changes to half size and with some transparency or something like that.] Any ideas to remake it?

Code: http://pastebin.com/r0pS4AYD

Ps: My code has nothing special and I just want a point/direction to make it.

Answer 1

When the user scolls to an specific position,
or in your case when he begins to scroll, you can add an class via jQuery.

Look here for more information:

Leave menu bar fixed on top when scrolled

(Code is taken from the post in the link)

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 50) {
         $('.menu').addClass('fixed');
     }
     else {
         $('.menu').removeClass('fixed');
     }
});

it is the best when you create an fiddle with your code, so other people can easy modify your code and see whats going on there..