CSS过渡倒退

时间:2016-02-01 04:25:11

标签: jquery html css css-transitions transitions

好吧,所以我对网站设计还不熟悉,而且我在网站上遇到过渡问题。 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();
    });
});

1 个答案:

答案 0 :(得分:0)

我已经访问了您的网站,并从开发者控制台进行了一些调试。似乎导致它缩小到一半大小的问题是

scale(.9);

将其更改为比例(1)或将其全部删除可以解决问题,但也会丢失动画。您可以尝试其他方法使其全宽,而不是依赖于比例。