从静态引导到固定导航栏，滚动滚动

Question

Having a little trouble working this one out. I have a bootstrap navbar that goes from static to fixed when the viewer scrolls past the logo at the top. Everything works fine, except when the navbar reaches the top, it jumps down missing first few lines of content. Can anyone help me solve this?

html

<div id="logo">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>BIG,</h1>
                <h1>BIG LOGO!</h1>
            </div>
        </div>
    </div>
</div>    

<div id="nav-wrapper">
    <div id ="nav" class="navbar navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
</div>    

css

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

java

$(function() {
    $('#nav-wrapper').height($("#nav").height());

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

Check the JSFIDDLE example

Thanks guys!

Answer 1

$(function() {
    $('#nav-wrapper').height($("#nav").height());

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

    $('#nav').on('affixed.bs.affix', function () {
        $('#content').css({"margin-top": "100px"})
    });
});

https://jsfiddle.net/yyLbgh98/1/