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来实施更改。

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

更改滚动徽标会将菜单项向下推

1 个答案: