CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user2441391
user2441391

Reputation: 339

Bootstrap, make a navbar sticky after scrolling down?

I have a navbar which is below the header image. I want the navbar to stick to the top of the webpage when I scroll down. I can't think of the jQuery or CSS required, because the navbar seems to stick right below the header image leaving some gap.

<div class="headerwrap pull-center">
<div  class="container">
    <div id="header" class="row-fluid">
        <div class="span5" id="phones">
            <img class="phone" src="img/white.png" alt="">
        </div>
        <div class="span7" id="mm-logo">
            <img class="mm-log" src="img/logo.png" alt="">
        </div>
    </div>
</div>
</div>


<div class="navbar navbar-inner" id="border-stuff">
    <div class="span12">

        <!-- .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 768px or less, place within here -->
<div class="nav-collapse collapse" id="center-nav">
<ul class="nav" >
    <li><a href="#h1"><h3>Heading1</h3></a></li><li class="divider-vertical"></li>
    <li><a href="#h2"><h3>Heading2</h3></a></li><li      class="divider-vertical"></li>
    <li><a href="#h3"><h3>Heading3</h3></a></li><li class="divider-vertical">  </li>
    <li><a href="#h4"><h3>Heading4</h3></a></li><li class="divider-vertical"></li>
    <li><a href="#h5"><h3>Heading4</h3></a></li>
</ul>
</div>

</div>
</div>

Upvotes: 21

Views: 96426

Answers (2)

Henrique
Henrique

Reputation: 41

You just need to replace your Jquery code to this:

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

And adjust the top to whatever fits best.

Upvotes: 4

Nathan Breit
Nathan Breit

Reputation: 1671

If you want your navbar to stay fixed at the top of the screen only once the header image has scrolled away you can use the bootstrap affix plugin.

Upvotes: 20

Related Questions