在滚动时将徽标缩小到导航栏答案

【问题标题】：Make Logo Shrink into Navbar on scroll在滚动时将徽标缩小到导航栏
【发布时间】：2015-08-02 09:25:12
【问题描述】：

我有一个高度大于导航栏的 div（120 像素与 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/

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

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

.tiny img {
    height: 20px;
}

【讨论】：

【解决方案2】：

差不多了，虽然我不清楚你想要达到的目标。您提供的 JSFiddle 会在导航栏外显示一个“流血”的徽标。应该是这样的吗？

如上所述，定位图像：

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

JSFiddle.

【讨论】：

是的，包含徽标的 div 旨在高于导航的其余部分。导航是固定的，因此当页面滚动时，橙色 div（以高度：120px 开头）缩小匹配导航栏的高度（75px）。

【解决方案3】：

如果对你有帮助，你也可以使用 this 来帮助你制作动画，因为你提到你想要过渡

【讨论】：

【解决方案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');
    }
});

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。