javascript - 使 Logo 在滚动时缩小到导航栏中

Question

我有一个 div，它的高度比导航栏大(120px 对比 75px 导航栏)。每当有人开始滚动时，我希望 Logo 过渡到与导航栏相同的高度。我试图切换一个 CSS 类，但没有成功，我忽略了什么？我正在使用 Bootstrap 导航栏。

这是固定导航的 HTML:

<div class="navbar-header">
    <button class="navbar-toggle btn btn-default" data-toggle="collapse" type="button">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
    </button>
      <a href="/" class="navbar-brand">
        <div id="floating-logo">Logo</div>
      </a>
</div>

这是 CSS 类:

#floating-logo {
    margin: -15px 50px 0 0;
    background-color: #FF9009;
    height: 120px;
    color: #FFF;
    line-height: 120px;
    width: 190px;
    text-align: center;
    padding: 0 7px;
}

.tiny{
    height: 75px;
}

这里是 jquery:

$(window).on("scroll touchmove", function () {
    $('#floating-logo').toggleClass('tiny', $(document).scrollTop() > 0);
});

我什至包括了一个 jsfiddle:https://jsfiddle.net/jkjmr6/2f4ofnsn/

Answer 1

您需要缩小 img，而不是 div。 试试看

.tiny img {
    height: 20px;
}