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固定頂部頂部

回答

相關問題