肚脐固定顶贴顶

Question

我已经设计了一个网页的结构，其中有一个顶部的顶部，然后有一个滑块，在滑块里面有一个肚脐！现在的问题是导航条应该是粘稠的，但是当我添加类nabar固定的顶部时，它会到达顶部，并与顶部重叠，让我用可视化的例子向您展示。

​

​

这就是我想让我的网页现在查看的问题！

​

当我添加类导航栏固定的顶部时，不管内容是什么，我想做的是当用户滚动到顶部时，导航条应该转到顶部，但是当用户再次到达页面顶部时，导航栏应该返回到如图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>

css

.navbar .brand {
    max-height: 40px;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
}
.navbar a.navbar-brand {
    padding: 9px 15px 8px;
}
.navbar{
    font-family: young;
    clear: both;
}
.navbar a{
    color: #515254;
}
.navbar-nav{
    font-size: 20px;
    padding-top: 20px;
}
#bs-example-navbar-collapse-1{
    float: left;
}
.nav > li > a:hover, .nav > li > a:focus{
    color: #007f3d;
    background: none;
}
.navbar-toggle .icon-bar {
    background-color: black;
}
.navbar-nav > li > a{
    padding-left: 10px;
    padding-right: 10px;
    color: white;
    font-size: 15px;
    margin-top: 10px;
}
.navbar-toggle {
    border: 1px solid #000;
}
.navbar-nav img.list{
    margin-top: -8px;
}
.slider{
    position: relative;
    background-image: url("../images/slider.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.slider img.downarrow{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    bottom: 20px;
}

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

Answer 1

它自己使用jquery吗?我所做的是在滚动页上添加了类导航条固定的顶部，并在提到顶部时删除了类导航条固定的顶部。

$(".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");

    }
    });