navbar-fixed-top kleben nach oben

Question

ich habe eine Struktur einer Webseite entworfen, in der es eine obere Leiste gibt, die oben kommt und danach gibt es einen Schieberegler und in einem Schieberegler gibt es eine Navigationsleiste! jetzt ist die Sache navbar sollte klebrig sein, aber was passiert ist, wenn ich die Klasse nabar-fixed-top hinzufügen geht es nach oben und Überschneidungen mit der topbar lassen Sie mich Ihnen mit visuellen Beispielen zeigen.

nun das ist, wie ich meine Web-Seite jetzt das Problem anzeigen möchten !!!

wenn ich hinzufügen die Klasse navbar-Festplatte ist klebt an der Spitze unabhängig vom Inhalt, was ich zu tun wan wird, wenn der Benutzer nach unten scrollt navbar nach oben gehen sollte, aber wenn der Benutzer kommt nach oben die Seite wieder navbar sollte meinen Code im Bild 1 hier ist wie gezeigt an den Ort zurückkommen

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

es tat mir jquery mit, was ich habe ist, ich die Klasse navbar-Festplatte auf scroll hinzugefügt und entfernt die Klasse navbar-Festplatte, wenn es nach oben kommt

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

    } 
    });