滚动经过全屏英雄单元后，Bootstrap 3 navbar-fixed-top

Question

我目前在尝试将导航栏修复到页面顶部时遇到了一些问题，但是在用户滚动经过我的全屏英雄单元之后。我花了过去 2 天的时间试图弄清楚，但我无法在任何地方找到确切的答案！

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

你可以在这里查看我到目前为止的内容：http://jsfiddle.net/Q5Rv3/

谢谢！！！

Answer 1

我想出了以下使用滚动属性的解决方案，虽然不能很好地使用滚动，但它确实有效。

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