CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Brian
Brian

Reputation: 2727

Best method for implementing Bootstrap's affix-top function on nav bar

I've been trying to get the affix-top function to work properly on my site I created using Bootstrap, but no matter what I set the offset as, it always prematurely jumps to the top of the page. It should be noted, that when I view my page on a local view or in Firefox, everything acts as it should, with no violent jumps, but when I actually upload it to the server, and view it in anything but Firefox, that's when things get wonky.

Here is the HTML for my navbar:

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="875">
  <div class="navbar-inner" data-spy="affix-top">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-top">Services</a></li>
            <li><a href="#contact-arrow">Contact</a></li>
        </ul><!--/.nav-->
      </div><!--/.nav-collapse collapse pull-right-->
    </div><!--/.container-->
  </div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->

Here's my JS:

<script>
    $(document).ready(function() {
        $('#nav-wrapper').height($("#nav").height());
        $('#nav').affix({
            offset: $('#nav').position()
        });
    });
</script>

And some of my CSS that relates:

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

For what it's worth, here is a similar post that I worked from first, but still couldn't get it to work for me. Here is my site as well so you can see how the navbar is jumping around.

Thanks for any help. I just can't seem to solve this issue!

Upvotes: 1

Views: 5437

Answers (1)

Brian
Brian

Reputation: 2727

This doesn't seem like the best solution, but it works (for now). All I did was change my JS code a little:

<script>
    $(document).ready(function() {
        $('#nav-wrapper').height($("#nav").height());
        $('#nav').affix({
            offset: 675
        });
    });
</script>

Upvotes: 1

Related Questions