0

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!

Jalapeno Jack
  • 416
  • 7
  • 21
  • Include all relevant code in the question, please. Also, I don't see a problem at how the code works now. On Chrome, that is, anyway. – Roope Oct 08 '15 at 17:35
  • the moment navbar gets fixed add `margin-top:50px` to div with id `content`. and remove margin-top when nav bar is not fixed – J Santosh Oct 08 '15 at 17:48

1 Answers1

0
$(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/

user1012181
  • 8,648
  • 10
  • 64
  • 106