更改滚动条上的徽标可将菜单项下移

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