在滾動條上更改徽標將菜單項向下推

Question

我正在工作的網站用於更改徽標位置和大小，從頂部到最左側，並且在用戶滾動時順便縮小導航欄以適合新大小下。我已經設法使它與JavaScript一起工作，但現在出現了另一個問題：當徽標重新定位到左側時，它將推動下面的菜單項。

爲了更好地說明這裏是一個小提琴：https://jsfiddle.net/resch/d6vfertf/3/

我要的是當用戶向下滾動，標誌轉到最左邊的菜單，但菜單項停留在中間（垂直講話）的導航欄。

注：此博客說明完美我想做的事：http://www.depoisdosquinze.com/

無法在這裏找到我的回答，請隨時標記爲重複投票和關閉，如果這是已經回答了。 謝謝！

var $header = $("nav.navbar"); 
 
var $logo = $("a.logo"); 
 
var $li = $("ul.navbar-nav > li"); 
 
var $img = $("img#logo"); 
 
$(window).scroll(function() { 
 
    var e = $(this).scrollTop(); 
 
    if (e > 90) { 
 
    $header.css("height", "60px"); 
 
    $img.css("max-width", "180px"); 
 
    $logo.removeClass('logo'); 
 
    $logo.addClass('logo.scroll'); 
 
    $li.addClass('scroll'); 
 
    } else { 
 
    $header.css("height", "120px"); 
 
    $img.css("max-width", "300px"); 
 
    $logo.removeClass('logo.scroll'); 
 
    $logo.addClass('logo'); 
 
    $li.removeClass('scroll'); 
 
    } 
 
});

img#logo { 
 
    max-width: 300px; 
 
    border: none; 
 
} 
 

 
.navbar { 
 
    position: relative; 
 
    margin-bottom: 0; 
 
    background-color: white; 
 
    border: 0; 
 
    font-size: 12px !important; 
 
    letter-spacing: 4px; 
 
    height: 120px; 
 
    opacity: 0.9; 
 
} 
 

 
.navbar-nav { 
 
    float: none; 
 
    margin: 0 auto; 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
.navbar-nav>li.scroll { 
 
    display: inline-block; 
 
    float: none; 
 
    padding-top: 0px; 
 
} 
 

 
.navbar-nav>li { 
 
    display: inline-block; 
 
    float: none; 
 
    padding-top: 70px; 
 
} 
 

 
.navbar-fixed-top { 
 
    position: fixed !important; 
 
} 
 

 
.logo.scroll { 
 
    position: absolute; 
 
    display: block; 
 
} 
 

 
.logo { 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -160px !important; 
 
    display: block; 
 
} 
 

 
.navbar-toggle { 
 
    z-index: 3; 
 
} 
 

 
.navbar li a, 
 
.navbar .navbar-brand { 
 
    color: #beb5ac !important; 
 
} 
 

 
.navbar-nav li a:hover { 
 
    color: #ded8d2 !important; 
 
    transition: color 1s ease; 
 
} 
 

 
.navbar-nav li.active a { 
 
    color: #fff !important; 
 
    background-color: #29292c !important; 
 
} 
 

 
.navbar-default .navbar-toggle { 
 
    border-color: transparent; 
 
} 
 

 
@media screen and (max-width: 780px) { 
 
    .logo { 
 
    margin-top: -50px; 
 
    padding-top: 10px !important; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <a id="brand" class="logo" href="teste3.html"> 
 
     <img id="logo" src="https://s4.postimg.org/3tdea6k19/logo2.png" alt=""></a> 
 
     <div class="navbar-header navbar-header-center"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="index"><a href="teste3.html">INÍCIO</a></li> 
 
      <li class="sobre"><a href="teste3_about.html">SOBRE</a></li> 
 
      <li class="ilustracao"><a href="teste3.html#ilustracao">ILUSTRAÇÃO</a></li> 
 
      <li class="design"><a href="teste3.html#design">DESIGN GRÁFICO</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</header> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br>

Answer 1

的問題是，當你向下滾動你的<div class="collapse navbar-collapse" id="myNavbar">，它保持全寬。解決問題的最快方法是需要以內聯方式顯示，即向其添加display: inline-block。如果風格不持久，則向其添加!important。

但是，在代碼中避免使用!important是個好主意。我會建議閱讀有關flexbox（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）的內容，因爲它可以更容易地在您的代碼中實現更改，而無需使用!importtant。

青蛙http://flexboxfroggy.com也有助於學習flexbox。我希望這有幫助。