Bootstrap 3 navbar-fixed-top after scroll past ful

问题:

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!!!

回答1:

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");
        }
    });
});