Question

我设计了一个网页结构，其中顶部有一个顶部栏，之后有一个滑块，在滑块内部有一个导航栏！现在问题是导航栏应该是粘性的，但是当我添加类nabar-fixed-top时，它会移到顶部并与顶部栏重叠，让我用视觉示例向您展示。

现在这就是我希望我的网页现在查看问题的方法！

当我添加类navbar-fixed-top时，无论内容是什么，我都要做的是当用户向下滚动导航栏时应该转到顶部但是当用户再次到达页面顶部时应该回到图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-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-fixed-top坚持顶部

1 个答案: