在滚动条上将徽标缩小到导航栏中

Question

我有一个div，其高度大于导航栏（120像素vs 75像素导航栏）。 每当有人开始滚动时，我都希望徽标过渡到与导航栏相同的高度。 我正在尝试切换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;
}

Answer 2

尽管您想达到的目标对我来说还不是很清楚。 您提供的JSFiddle显示了一个在导航栏外部“出血”的徽标。 应该是这样吗？

如上所述，定位图像：

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

JSFiddle 。

Answer 3

如果有帮助，您也可以使用它来帮助制作动画，因为您提到要过渡

Answer 4

var scrollTop = jQuery(document).scrollTop();   
if (scrollTop > 0) {
    jQuery(".logo").css('width', '75px');
}
else {
    jQuery(".logo").css('width', '120px');
}

jQuery(window).resize(function() {
    var scrollTop = jQuery(document).scrollTop();   
    if (scrollTop > 0) {
        jQuery(".logo").css('width', '75px');
    }
    else {
        jQuery(".logo").css('width', '120px');
    }
});

jQuery(window).scroll(function() {
    var scrollTop = jQuery(document).scrollTop();   
    if (scrollTop > 0) {
        jQuery(".logo").css('width', '75px');
    }
    else {
        jQuery(".logo").css('width', '120px');
    }
});