Bootstrap header Scroll Offset

问题:

I have a logo and a header with my Navigation like this:

<div id="logohead">
//...
</div>   
<header id="header" class="affix navbar navbar-static" data-spy="affix" role="banner">
//...
</header><!--/#header-->

in my Footer i do this:

<SCRIPT type="text/javascript">
$(document).ready(function(){


$('#header').affix({
      offset: {
        top: $('#logohead').height()
      }
}); 

    $(window).scroll(function(){
    if ($(document).scrollTop() > 100) {
        $('#header').addClass('shrink');
    } else {
        $('#header').removeClass('shrink');
    }    
    });
});

</SCRIPT>

i want to resize my logotext which is in the header. the logo picture is in #logohead. my problem is the jumping of the page in certain page sizes. if there is a special size of the browser, some pages start to jump and my script is not working. is there a fix?

EDIT: http://jsfiddle.net/am59aakg/1/

thought i found a solution: it makes less jumping but still not perfect.

just added

.affix + .container {
    padding-top:50px
}

but it doesn

回答1:

this makes it working ...more or less...:

.affix + div {
    margin-top:80px;
}
.affix + .page-header {
    margin-top:100px;
}

first try was (not working):

`.affix + .container {
    padding-top:50px
}`