Schrumpf Bootstrap behoben Navbar mit Logo auf Bildlauf

Question

Ich muss den reibungslosen schrumpfenden Header-Effekt als in this example erreichen. Ich reparierte navbar mit Bootstrap 3, aber ich habe Probleme mit dem Logo.

Mein Code so weit:

HTML, der CSS hat eine Toggle-Animation, um es abgesehen von der Schrumpfung und das JavaScript hat eine Schrumpf- und autohide Funktion

//Shrink and AutoHide navbar 
$(window).scroll(function() { 
    if ($(document).scrollTop() > 100) { 
    $('nav').addClass('shrink'); 
    } else { 
    $('nav').removeClass('shrink'); 
    } 
    if ($(document).scrollTop() >= 200) { 
    $("nav.navbar-fixed-top").autoHidingNavbar(); 
    } 
}); 

/* NavBar Toggle X Animation */ 
.navbar-toggle { 
    border: none; 
    background: transparent !important; 
} 
.navbar-toggle:hover { 
    background: transparent !important; 
} 
.navbar-toggle .icon-bar { 
    width: 22px; 
    transition: all 0.2s; 
} 
.navbar-toggle .top-bar { 
    transform: rotate(45deg); 
    transform-origin: 10% 10%; 
} 
.navbar-toggle .middle-bar { 
    opacity: 0; 
} 
.navbar-toggle .bottom-bar { 
    transform: rotate(-45deg); 
    transform-origin: 10% 90%; 
} 
.navbar-toggle.collapsed .top-bar { 
    transform: rotate(0); 
} 
.navbar-toggle.collapsed .middle-bar { 
    opacity: 1; 
} 
.navbar-toggle.collapsed .bottom-bar { 
    transform: rotate(0); 
} 


/* Navbar Shrink */ 

nav a { 
    padding-top: 20px !important; 
    padding-bottom: 20px !important; 
    font-size: 18px; 
} 

nav .navbar-toggle { 
    margin: 13px 15px 13px 0; 
} 

.navbar-brand { 
    font-size: 30px; 
} 



nav.navbar.shrink { 
    min-height: 35px; 
} 

nav.shrink a { 
    padding-top: 10px !important; 
    padding-bottom: 10px !important; 
    font-size: 15px; 
} 

nav.shrink .navbar-brand { 
    font-size: 25px; 
} 

nav.shrink .navbar-toggle { 
    padding: 4px 5px; 
    margin: 8px 15px 8px 0; 
} 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> 
     <a class="navbar-brand" href="#"><img src="http://placehold.it/300x214"></a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav pull-right"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li role="separator" class="divider"></li> 
        <li class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
     </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
</nav> 

Schätzen Sie die Hilfe, da ich das Logo nicht wie im abgebildeten Beispiel schrumpfen lassen kann.

Schließlich muss ich auch einen Weg finden, die Navbar mit einem transparenten Hintergrund zu haben, der schwarz wird, wenn er geschrumpft wird.

Answer 1

HTML

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> 
     <a class="navbar-brand" href="#"><img src="http://placehold.it/300x214"></a> </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav pull-right"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li class="dropdown-header">Nav header</li> 
      <li><a href="#">Separated link</a></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    <!--/.nav-collapse --> 
    </div> 
</nav> 
<div class="container"> 
    <p>Lorem ipsum dolor sit amet, putent tritani necessitatibus eam ad, cum an suas tempor probatus. Ea duo soleat essent possim, decore quaeque mei an. No vis ignota timeam, ne tantas virtute qui. Libris melius inermis ei duo. </p> 
    <p> No vix case vocent. Est ei quem definiebas. Ex quod graece per, ne laudem necessitatibus has, habemus perpetua petentium usu te. Esse modus libris ea sed. Et aeterno feugait moderatius ius, nostro tacimates ut sea. Solum incorrupte sadipscing has ei, quot laboramus inciderint no est. </p> 
    <p> Ei eos soleat nullam praesent, nostrum pericula voluptatibus ius ad, nibh sadipscing ex has. Sea assentior voluptatum in. Ad mei vitae impedit nominati, usu graece alienum ad, has mundi timeam omittantur cu. Mea tempor populo platonem no, ridens dolorem corrumpit ex mel. </p> 
    <p> Possim nonumes an quo, dicat audiam luptatum cu eos. Pro veri graecis mandamus an. Et quo illum definitionem. Eros maluisset est no, eum ad hinc accumsan tractatos. Dicit consul complectitur ex nam, id expetenda referrentur cum, ludus nominavi repudiandae te his. Ullum altera everti has id, inani delectus id qui. </p> 
    <p> Id qui clita adipisci disputando. Pri ne exerci primis, no vis dolorem habemus delectus. Ius et consul voluptua, duo ubique noster maiorum ad. Te ius malis debet repudiandae. Id pri quas deserunt. Eos error singulis ullamcorper no. </p> 
    <p> Ridens definitionem has ea, ex omnes oblique mei. Vel ad repudiare comprehensam, no sit utamur inciderint. Ius partem omnium graecis at. Putent tritani qualisque sea at, doctus quaerendum vel at. Simul qualisque te vis, ad nec causae iisque oportere. Quis errem te mei. </p> 
    <p> Delicata dissentiunt comprehensam nec eu. Qui nostrud patrioque ad, vis at efficiantur complectitur. Ex has dissentiet conclusionemque, ea inermis partiendo nam. Nec vidisse mentitum deseruisse at, oratio cetero voluptaria ea nec, tempor scripserit sit ad. Duo dicta animal ut. Gloriatur percipitur adversarium vel et, numquam principes consequuntur mea no. </p> 
    <p> Mea ex vide invidunt, eruditi dissentiet conclusionemque vis et, in pro consul partem maiestatis. Cibo libris necessitatibus ei cum, alia solet minimum in usu. Labores recteque et his. Purto oratio per ne. </p> 
    <p> Et usu iuvaret efficiantur, possim copiosae invenire eu cum, sed dolores corrumpit ne. Tota volutpat forensibus an sit, has dolorum fuisset detraxit no. Ne duo hendrerit reformidans. His ex sanctus fabulas inimicus. Te vocent eripuit cum. </p> 
    <p> Ex qui inani inimicus persequeris, lobortis indoctum adipiscing est in, viris perfecto pericula eum at. Volumus abhorreant disputando est an, liber simul duo ea. Ne maluisset moderatius est, quo amet maiorum honestatis no, modus offendit has an. Harum praesent maiestatis no eam, sit ex vocibus voluptua, ne his ullum doming. Cu wisi inciderint has. Sed adhuc malis utinam te, quis labitur in ius, facilisis gubergren et cum. </p> 
    <p> Choro perpetua sed et, mea dicam libris quaerendum cu. Ea dictas interpretaris duo. Quo ut facete aperiri repudiandae. Affert philosophia vis ne. Denique maluisset iracundia ut sit, ad pri unum consul ubique, tantas inimicus interesset ut usu. His an minimum sadipscing. </p> 
    <p> Meis facer vitae vix id. Autem dissentiunt mei cu. No insolens expetenda consetetur mei. Omnesque persequeris at duo. Sit cu nonumes deserunt assentior, has dolor sententiae an. Pro atqui vivendo at, id lorem inani constituam est, singulis salutatus pri ei. </p> 
    <p> Sit ne timeam iisque, tation aeterno eleifend ex has. Ea duo zril pericula disputationi. Albucius argumentum et has. Te quo agam ignota assueverit, sed audiam prodesset ex. Mei ad tale vocibus, ut nec quodsi eripuit. </p> 
    <p> Consul omittam qui at, everti fastidii accumsan ei mea. Dicant fastidii est ex, et vel quis facilis persecuti. Feugiat sententiae definitionem sea eu, cu movet habemus sea, usu in persius officiis reprehendunt. Pro nisl legere pertinacia ad, forensibus interpretaris ex mel. </p> 
    <p> Ad vix dicant homero, aperiri electram posidonium his eu. Eum altera platonem ex. Eam eu civibus invidunt. Oratio efficiendi eu per, pri electram salutatus id, an meis omnis regione pro. </p> 
    <p> In dolorem propriae sententiae mea. Vix ei assum movet vocibus. Te sea simul fastidii accommodare, at qui malis saepe insolens, et his quando appellantur. Vituperata eloquentiam mediocritatem mea ex. Modus admodum phaedrum vis eu, eum vitae ornatus ne. </p> 
    <p> Purto vocent quo et, sed audire assentior cu. Civibus assentior eam cu. Usu facer quaeque ad. Nihil debitis mea eu, error nominati volutpat no ius. Et probo nostrum forensibus his, vis ad labitur honestatis. </p> 
    <p> Regione postulant scripserit sea ut. Ea falli intellegam mea, eu senserit volutpat eam. Ne cum facilisi suavitate, ut dico scripta voluptaria vix. Cum vero splendide signiferumque ex. His et assum aeterno, eu sea meis doctus assentior, mea legimus mediocritatem cu. Pri an veniam partiendo. </p> 
    <p> Quis aliquid theophrastus id pri. Cu mei placerat evertitur. In pro vidisse similique, ut summo constituam accommodare vis. Cu sit affert apeirian. Cum choro omittam platonem at, vis prima doctus an. Vel quaeque assueverit voluptatibus et, an eos dicta nonumes legendos, error dolorem accusamus nec at. </p> 
    <p> Te nec epicuri posidonium. Nullam scripta discere in eam, mei ut erat magna, eius equidem detracto sed ei. Vel lorem erant splendide ex, menandri voluptaria comprehensam cum eu. Fugit appareat disputationi cu usu. Everti noluisse adipiscing pro in, his diam fabulas adolescens an. </p> 
    <p> Has ei alia justo gubergren, patrioque aliquando dissentiunt est at. Mel ut viris labore, idque oportere ea per, sea alii case dicam id. Ne ipsum dicit sed, ignota nominavi te usu. Velit debitis sea ne, mei audiam apeirian intellegebat te, cu vim rebum feugait consectetuer. At probo zril perpetua eam. </p> 
    <p> Est no stet interesset signiferumque, vix te nullam adipisci reprehendunt. Nam eu dicunt accusam, debet primis lobortis te nec. An vide euismod sententiae sed, eu sea congue scripta, dicant mediocritatem sit no. Hinc saperet ne vis, aperiri cotidieque in his, nec simul omittantur ad. </p> 
    <p> Quem prompta philosophia et eos, pri in fierent scriptorem. Ei dicunt persius eum, ne usu odio mollis. Ne pro tibique erroribus, pro incorrupte cotidieque an. Cum legendos laboramus ad. Admodum percipit theophrastus vim ut, vidit fabulas delenit sit ad. </p> 
    <p> Disputando neglegentur eam ut, molestiae cotidieque instructior te ius. Mei omnes suavitate ea. Movet eligendi no sit. Oblique nostrud maluisset ne eam, veritus philosophia eos in. </p> 
    <p> His cetero tacimates in, ne falli altera persequeris eum. At tacimates. </p> 
</div> 

CSS

/* NavBar Toggle X Animation */ 

.navbar-toggle { 
    border: none; 
    background: transparent !important; 
    transition: all 0.3s; 
} 

.navbar-toggle:hover { 
    background: transparent !important; 
} 

.navbar-toggle .icon-bar { 
    width: 22px; 
    transition: all 0.3s; 
} 

.navbar-toggle .top-bar { 
    transform: rotate(45deg); 
    transform-origin: 10% 10%; 
} 

.navbar-toggle .middle-bar { 
    opacity: 0; 
} 

.navbar-toggle .bottom-bar { 
    transform: rotate(-45deg); 
    transform-origin: 10% 90%; 
} 

.navbar-toggle.collapsed .top-bar { 
    transform: rotate(0); 
} 

.navbar-toggle.collapsed .middle-bar { 
    opacity: 1; 
} 

.navbar-toggle.collapsed .bottom-bar { 
    transform: rotate(0); 
} 


/* Navbar Shrink */ 

nav a { 
    padding-top: 20px !important; 
    padding-bottom: 20px !important; 
    font-size: 18px; 
    transition: all 0.3s; 
} 

nav .navbar-toggle { 
    margin: 13px 15px 13px 0; 
} 


nav.navbar.shrink { 
    min-height: 35px; 
    transition: all 0.3s; 
} 

nav.shrink a { 
    padding-top: 10px !important; 
    padding-bottom: 10px !important; 
    font-size: 15px; 
    transition: all 0.3s; 
} 

nav.shrink .navbar-toggle { 
    padding: 4px 5px; 
    margin: 12px 15px 8px 0; 
    transition: all 0.3s; 
} 
.navbar-brand > img { 
    width:100%; 
    height:30px; 
    margin-top:-5px; 
    transition: all 0.3s; 
} 
nav.shrink .navbar-brand > img{ 
    width:100%; 
    height:24px; 
    margin-top:5px; 
    transition: all 0.3s; 
} 

Live demo