Bootstrap affix and text + logo shift

Question

I am quite new using bootstrap and I am really interested in the affix navbar. (The one which stayed at the bottom and then go to the top when you scroll).

However, I'll try but I can't copy the effect of this website: http://www.blastprocessor.co.uk/

And after many research I can't find out how to make the text of the menu (which is in the center) to shift to the right (or left) like an animation when you scroll down. And the logo appearing as well.

Do you know how I could do this

Thanks a lot for your help.

Answer 1

the bootstrap affix is for any element on your html you only need add the boostrap.js on your js directory and configure de top and/or bottom you need to change this element i have a example you have a nav header

<nav class="navbar navbar-inverse" role="navigation" id="affix-nav">

in your js file you need this line for example

$('#affix-nav').affix({
offset: {
  top: 100
}})

ok the affix is running in your html, but the nav is not change to fixed position, you need add a css for the new class added with the affix

nav.affix{
width: 100%!important;
top: 0;}

and now you can see the affix navbar in your web, you can try with this nav too

<nav class="navbar navbar-inverse" role="navigation" id="affix-nav" data-spy="affix" data-offset-top="125">

and you don't need the js file for the affix

to play with elements on the nav check my next example

$(window).scroll(function(){
       var height = $(this).scrollTop();
       var brand = $(".navbar-brand");
       if (height > 125){
         brand.show('slow');   
       }
       else{
          brand.hide();
       }
    });