Bootstrap 3 navbar-fixed-top after scroll past fullscreen hero unit

I am currently having some issues trying to fix my navbar to the top of the page, BUT after the user scrolls past my fullscreen hero unit. I spent the last 2 days trying to figure it out and I cant find an exact answer anywhere!

<!-- Begin Hero --> <div class="jumbotron hero"> <!-- Content --> <div class="container center-vertically"> <hr> <p>We are Bolt & we like to <em>focus</em> on</p> <h1>Websites</h1> <hr> </div> </div> <!-- End Hero --> <!-- Begin Navigation --> <div class="navbar"> <div class="container"> <!-- Brand --> <a href="#" class="navbar-brand"><img class="logo" width="45" height="45" alt="lightning bolt logo" src="img/logo.png"></img></a> <!-- Mobile Navigation --> <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="ion-navicon"></span> </button> <!-- Main Navigation --> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">Team</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> <!-- End Navigation --> <!-- Begin Summary --> <section id="section1"> <div class="row summary"> <div class="container"> <!-- Content --> <div class="col-lg-10 col-lg-offset-1"> <h3>We create useable ui</h3> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a elit turpis. Phasellus non varius mi. Nam bibendum mauris at sollicitudin lacinia. Vestibulum blandit nibh neque, id consequat mi vestibulum eu. Suspendisse potenti. Ut ac consequat nulla. Praesent tristique eleifend tincidunt.</p> <button class="btn btn-default bolt-button-default"> About us </button> </div> </div> </div> </section> <!-- End Summary -->

You can check out what I have so far here : http://jsfiddle.net/Q5Rv3/

Thank you!!!

Answer1:

I came up with the following solution which uses scroll property, not great to work with scroll but it does the work.

http://jsfiddle.net/Q5Rv3/2/

$(function () { $(document).on( 'scroll', function(){ console.log('scroll top : ' + $(window).scrollTop()); if($(window).scrollTop()>=$(".jumbotron").height()) { $(".navbar").addClass("navbar-fixed-top"); } if($(window).scrollTop()<$(".jumbotron").height()) { $(".navbar").removeClass("navbar-fixed-top"); } }); });

人吐槽 人点赞

Recommend

Comment

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:Bootstrap 3 navbar-fixed-top after scroll past fullscreen hero unit