Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

How to use affix in Bootstrap to create a sticky navigation bar (CSS preferred)

I'm currently trying to create a website so that the navigation bar is only visible once the header is out of site and then fixes itself to the top of the page. I have read various documentation and I understand that you must use affix to do this. However I don't really understand how to implement this: http://getbootstrap.com/javascript/#positioning-via-css into my code

 <div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <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="#">Ruby L.</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>  
        </div>

As you can see, I have tried adding some of the documentation into my navigation bar and I have posted some CSS that I thought might be relevant. I have tried playing around with it but to no avail. Any help would be highly appreciated!

.jumbotron {
   min-height: 650px; 
}

.navbar-default {
    background-color: white;
    background-image: none;  
    border: none; 
}

.affix {
    position: fixed;
}

1 Answer

Christoph Hellmuth
Christoph Hellmuth
11,604 Points

Hi Ruby, this is a little more complex. First you need the bootstrap Javascript file, affix.js and need to link it into your html.

  1. Version: Bootstrap uses data attributes to watch it and add an offset for example.

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200"> ... </div>

OR

  1. Trough Javascript: Just add this code and change the #id of the element you want to affix.

$('#myAffix').affix({ offset: { top: 100, bottom: function () { return (this.bottom = $('.footer').outerHeight(true)) } } })

Christoph Hellmuth
Christoph Hellmuth
11,604 Points
  1. Version: Bootstrap uses data attributes to watch it and add an offset for example.
            <div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>
            ```

Hi Christoph

Thanks for your answer although I don't really understand Javascript that much hence why I wanted to use the CSS version http://getbootstrap.com/javascript/#positioning-via-css. If you could explain or give a hint as to how to implement this in my own code then that would be great!