javascript - 在滚动条上更改 Logo 会将菜单项向下推

Question

我正在工作的网站应该更改 Logo 的位置和大小，从顶部到最左边，并在用户向下滚动时顺便缩小导航栏以适应新的大小。我已经设法让它与 javascript 一起工作，但现在出现了一个不同的问题:当 Logo 重新定位到左侧时，它会将菜单项推到下面。

为了更好地说明它，这里有一个 fiddle :https://jsfiddle.net/resch/d6vfertf/3/

我想要的是当用户向下滚动时， Logo 转到菜单的最左侧，但菜单项位于导航栏的中间(垂直而言)。

注意:这个博客完美地说明了我正在尝试做的事情: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 的情况下实现更改。在你的代码中。

Frog http://flexboxfroggy.com对学习flexbox也很有帮助。我希望这会有所帮助。