在滚动条上更改徽标将菜单项向下推

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。我希望这有帮助。