CSS過渡向后運行

Question

好吧，所以我是網站設計的新手，我在網站過渡方面遇到問題。 http://www.artbymarissa.com/test

如您所見，向下滾動時，導航欄會縮小到其大小的一半。 它應該從一半的大小增長到完整的大小，但我找不到解決方案。 我覺得修復起來很容易，但是我的大腦在第二秒就不起作用了。 任何幫助表示贊賞！

HTML：

<header class="navbar" style="top: -1%; left: -1%;">
  <center><img src="http://files.enjin.com/1141108/05094af5e642a261732c8bcf78140f66c9602ad9da39a3ee5e6b4b0d3255bfef95601890afd80709da39a3ee5e6b4b0d3255bfef95601890afd807098cf0696e.png" alt="" width="360" height="88" /></center>
</header>
<br />
<div class="navigation">
  <ul>
    <li style="text-align: center;"><a href="/homepage">Home</a></li>
    <li style="text-align: center;"><a href="/shop">Shop</a></li>
    <li><a href="reviews">Reviews</a></li>
    <li style="text-align: center;"><a href="/contact">Contact</a></li>
    <li style="text-align: center;"><a href="/giveaway">Giveaways</a></li>
    <li style="text-align: center;"><a href="http://artbymarissa.buycraft.net/category/607213">Packages</a></li>
  </ul>
</div>

我的過渡代碼：

.scrolled {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height: 60px;
  background-color: #1a1a1a;
  opacity: 95%;
  z-index: 999;
  box-shadow: 0px 5px 4px #000000;
  transform: scale(.9); /* 1/10 of the original size */
  transition: all 1s ease-in;
}
.scrolled.opened {
    transform: scale(1);
}

JavaScript：

$(document).ready(function(){
    var sticky_top = $('.navigation').offset().top;
    $('.navigation').after('<div class="sticky_spacer" style="height: ' + $('.navigation').height() + 'px; display: none;"></div>');
    $('.sticky_spacer').css('transition', $('.navigation').css('transition'));
    function toggleSticky() {
        if ($(window).scrollTop() >= sticky_top) {
            $('.navigation').css('position', 'fixed').css('top', '0');
            $('.sticky_spacer').show();
            $('.navigation').addClass('scrolled');
        }else {
            $('.navigation').css('position'  , 'relative').css('top', 'auto');
            $('.sticky_spacer').hide();
            $('.navigation').removeClass('scrolled');
        }
    }
    toggleSticky();
    $(window).scroll(function() {
        toggleSticky();
    });
});

Answer 1

我去了您的站點，並從開發人員控制台進行了一些調試。 似乎導致它縮小到一半的問題是

scale(.9);

將其更改為scale（1）或將其完全刪除可以解決此問題，但也會丟失動畫。 您可以嘗試其他方法使它變為全角，而不是依靠比例。