jquery - stick navigation to top when scrolled to/past - Bootstrap 3 -
i trying create navigation sticks top of site when hits top of page. (the navigation 280px top when user @ top of page)i using bootstrap 3 framework in wordpress.
this common thing , have found number of examples can't seem work me.
i have generic bootstrap navigation. trying put following code in no success.
html ( in < head > tags )
<script> $('#nav').affix({ offset: { top: $('header').height() } }); </script> html
<body <?php body_class(); ?> > <header class="masthead"> <div class="container"> <div class="row"> <div class="col-sm-6"> <h1><a href="#" title="scroll down viewing pleasure">bootstrap 3 layout template</a><p class="lead">big top header , fixed sidebar</p></h1> </div> <div class="col-sm-6"> </div> </div> </div> </header> <!-- begin navbar --> <div id="nav"> <div class="navbar navbar-default navbar-static"> <div class="container"> <!-- .btn-navbar used toggle collapsed navbar content --> <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span> </a> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li class="divider"></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> </div> </div><!-- /.navbar --> </div> </div> css
header { height:280px; } #nav.affix { position: fixed; top: 0; width: 100%; z-index:10; }
Comments
Post a Comment