Question

我有一个div，其高度比导航栏高（120px对75px导航栏）。每当有人开始滚动时，我希望徽标转换到与导航栏相同的高度。我试图切换一个没有运气的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。试试

@JsonSetter( "r" )
public void alternateSetRed( byte red ) {
    this.red = red;
}

Answer 2

几乎在那里，虽然你想要实现的目标对我来说并不清楚。你提供的JSFiddle显示了一个标志，＆＃34;流血＆＃34;在导航栏外面。它应该是这样的吗？

如上所述，定位图像：

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

JSFiddle

Answer 3

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

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');
    }
});

滚动时使徽标缩小到Navbar

4 个答案: