JSFiddle - React, Tailwind, and code Playground

HTML

<section id="navbar-wrapper">
    <nav class="navbar navbar-inverse no-radius" role="navigation" id="nav">
        <div class="container">
            <ul class="nav navbar-nav navbar-custom-nav">
                <li class="active"><a href="#">Home</a>
                </li>
                <li><a href="#">Link</a>
                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right navbar-weather">
                <li id="weather" style="padding-top: 3%;"></li>
            </ul>
        </div>
    </nav>
</section>

CSS

@import url('http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');

JavaScript

//This is to make our #nav stick to the top when scrolling
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
    offset: $('#nav').position()
});
$('#nav').on('affix.bs.affix', function () {
    alert('Fired!');
});