Twitter bootstrap 导航杆固定顶部粘在顶部

我已经设计了一个网页的结构，其中有一个顶栏，它位于顶部，然后是一个滑块，滑块内有一个导航栏！ 现在的问题是，导航栏应该是粘性的，但是当我添加nabar fixed top类时，它会进入顶部，并与topbar重叠，让我用可视化示例向您展示

现在这是我希望我的网页如何查看现在的问题！！！

当我添加类navbar fixed top时，无论内容如何，它都会固定在顶部。我想做的是，当用户向下滚动时，navbar应该转到顶部，但当用户再次到达页面顶部时，navbar应该回到如图1所示的位置 这是我的密码

html

<div class="topbar">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 col-md-4">
                <p class="marker">1880 Sismet Road Mississauga, ON L4W 1W9, Canada</p>
            </div>

            <div class="col-sm-12 col-md-4">
                <p class="phone">+1 905-212-9482</p>
                <span class="eye">+ -</span>
            </div>

            <div class="col-sm-12 col-md-4 padding">
                <Div class="float">
                    <p class="follow">Follow Us:</p>
                    <a href="https://www.facebook.com/Autombrakes/" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                    <a href="https://www.facebook.com/Autombrakes/" target="_blank"> <i class="fa fa-twitter" aria-hidden="true"></i></a>
                    <a href="https://www.facebook.com/Autombrakes/" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
                    <a href="https://www.facebook.com/Autombrakes/" target="_blank"> <i class="fa fa-linkedin" aria-hidden="true"></i></a>
                    <a href="https://www.facebook.com/Autombrakes/" target="_blank"> <i class="fa fa-yelp" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="slider" id="height">
    <div class="container-fluid">
        <div class="row">
            <nav class="navbar navbar-fixed-top" role="navigation">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <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" href="#"><img class="img-responsive" src="images/navbar_logo.png" alt=""></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="#"><img src="images/navbar_home.png" class="img-responsive"/></a></li>
                        <li class="active"><a href="#">ABOUT US</a></li>
                        <li><a href="#">EYE EDUCATION</a></li>
                        <li><a href="#">FEMTO CATARACT</a></li>
                        <li><a href="#">PROCEDURES</a></li>
                        <li><a href="#">DIAGNOSTICS</a></li>
                        <li><a href="#">CONTACT US</a></li>
                        <li><a href="#"><img src="images/navbar_search.png" class="img-responsive"/></a></li>
                        <li><a href="#" class="make-appointment">BOOK AN APPOINMENT</a></li>
                        <li><a href="#"><img src="images/navbar_list.png" class="img-responsive list"/></a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </nav>
        </div>
    </div>
    <a href="#section1" class="scrollTo"><img src="images/navbar_downarrow.png" class="img-responsive downarrow"/></a>
</div>

jquery

 $(window).scroll(function() { // check if scroll event happened
        if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
            $(".navbar-fixed-top").css("background-color", "#fff"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
            $(".navbar-nav >li > a").css("color","black");
        } else {
            $(".navbar-fixed-top").css("background-color", "transparent"); // if not, change it back to transparent
            $(".navbar-nav > li > a").css("color", "#fff");
            $(".navbar").removeClass("nav-active");
        }
    });

---

我自己用jquery做的我做的是在scroll上添加了类navbar fixed top，当它到达顶端时删除了类navbar fixed top

$(".navbar").removeClass("navbar-fixed-top");

    /* effect for navbar change on scroll*/
    $(window).scroll(function() { // check if scroll event happened

    if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
       $(".navbar-nav >li > a").css("color","black");
        $(".navbar").addClass("navbar-fixed-top");
        $(".navbar-fixed-top").css("background-color", "#fff"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)


    } else {
        $(".navbar-fixed-top").css("background-color", "transparent"); // if not, change it back to transparent
        $(".navbar-nav > li > a").css("color", "#fff");
        $(".navbar").removeClass("navbar-fixed-top");

    }
    });

$(".navbar").removeClass("navbar-fixed-top");

    /* effect for navbar change on scroll*/
    $(window).scroll(function() { // check if scroll event happened

    if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
       $(".navbar-nav >li > a").css("color","black");
        $(".navbar").addClass("navbar-fixed-top");
        $(".navbar-fixed-top").css("background-color", "#fff"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)


    } else {
        $(".navbar-fixed-top").css("background-color", "transparent"); // if not, change it back to transparent
        $(".navbar-nav > li > a").css("color", "#fff");
        $(".navbar").removeClass("navbar-fixed-top");

    }
    });