Переход 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);

Изменение его масштаба (1) или его удаления полностью устраняет проблему, но и проигрывает анимацию. Вы можете попробовать другие способы сделать его полной шириной вместо того, чтобы полагаться на масштаб.