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

滚动浏览全屏英雄单位后，Bootstrap 3导航栏固定顶部

1 个答案: