如何在navbar-fixed-top bootstrap的顶部添加100％高度的部分

Question

我目前正在为我的视差网站使用bootstrap，我想使用 navbar-fixed-top 作为我的navi。但是在介绍页面，我希望导航保持在底部（ navbar-static-bottom ），直到我向下滚动到下一部分，它将自动变为 navbar-fixed-top 谁知道怎么做？

这是我的代码：

<!-- Intro Section -->
<section id="intro" class="intro-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Scrolling Nav</h1>
                <p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p>
                <a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a>
            </div>
        </div>
    </div>
</section>

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">GAYA ISLAND RESORT</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#about">About</a>
                </li>
                <li>
                    <a class="page-scroll" href="#services">Services</a>
                </li>
                <li>
                    <a class="page-scroll" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

但我不知道如何编写jQuery代码。

我尝试使用此但不准确，当我滚动1位然后导航直到更改为 navbar-fixed-top 。我可以在#intro转到 navbar-fixed-top 之后调用滚动吗？

$(document).scroll(function(e){
var scrollTop = $(document).scrollTop();
if(scrollTop > 0){
    console.log(scrollTop);        
    $('.navbar').removeClass('navbar-fixed-bottom').addClass('navbar-fixed-top');
} else {
    $('.navbar').removeClass('navbar-fixed-top').addClass('navbar-fixed-bottom');
}
});