Bootstrap affix（）插件在滚动内容时出现问题

Question

I'm trying to use the Bootstrap affix() plugin. I want the navbar to pin to the top of the screen when I scroll. here is what i have so far: http://jsfiddle.net/zncud7md/2/

The issue is the content below navbar shifts (tiny bit of inch downwards) when the affix class triggers in. I even tried adding the: #header.affix + #body { padding-top: 75px; } #header.affix + #body { padding-top: 75px; } that i found on other sources but didnt work for me. I'm unable to find a way around this. Any ideas how can i prevent this issue?? Thanks!!

Answer 1

Bootstrap affix acts like sticky positioning so that if you scroll, you can have an element stick to a fixed position ( http://getbootstrap.com/javascript/#affix ).

Instead, you can simplify your code by setting your header position to fixed at top:0 and pad the top of your body.

#header {
    position: fixed;
    top: 0;
    z-index: 9999;
}
#body {
    padding-top: 75px;
}

http://jsfiddle.net/zncud7md/4/