navbar固定顶部顶部

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

现在这是我多么希望我的网页现在查看的问题！

当我添加类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"); 
     } 
    });

来源

2017-02-03 uneeb meer

做到了我自己的使用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"); 

    } 
    });

来源

2017-02-03 14:53:55

navbar固定顶部顶部

回答

相关问题