向后运行的 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） 或完全删除它可以解决问题，但也会丢失动画。您可以尝试其他使其全宽的方法，而不是依赖比例。