使用CSS导航栏高度转换

Question

目前我正在使用以下JavaScript来设置导航栏的动画。有没有办法用CSS Transitions / Animations做到这一点？

http://jsfiddle.net/v8fhn4qc/

$(function() {
  $('#header_nav').data('size', 'big');
});

$(window).scroll(function() {
  if ($(document).scrollTop() > 0) {
    if ($('#header_nav').data('size') == 'big') {
      $('#header_nav').data('size', 'small');
      $('#header_nav').stop().animate({
        height: '78px'
      }, 600);
      $("ul#menu-primary-menu").css("bottom", "35%");
    }
  } else {
    if ($('#header_nav').data('size') == 'small') {
      $('#header_nav').data('size', 'big');
      $('#header_nav').stop().animate({
        height: '100px'
      }, 600);
      $("ul#menu-primary-menu").css("bottom", "0");
    }
  }
});

#header_nav {
  background: #1588cb;
  width: 100%;
  height: 100px;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
}
body {
  height: 1000px
}
nav {
  height: 100px
}
nav ul {
  position: absolute;
  bottom: 0;
  margin: 0px;
  right: 0px;
  transition: 0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="header_nav">

  <a id="cos_logo" href="#" title="">
    <img src="http://placehold.it/171/x30" alt="" width="171" height="30" class="no-scale" />
  </a>

  <nav class="primary menu">

    <div class="menu-primary-menu-container">

      <ul id="menu-primary-menu" class="menu">
        <li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44"><a href="/wordpress/">Home</a>
        </li>
      </ul>

    </div>

  </nav>

</div>

Answer 1

您可以添加CSS过渡，然后添加/删除一个类。

<强> CSS

#header_nav{
    height:100px;
    transition: height .600s ease;
}

#header_nav.scrolled{
    height:78px;
}

#header_nav.scrolled ul#menu-primary-menu{
    bottom:35%;
}

<强>的Javascript

$(window).scroll(function(){
   $('#header_nav').toggleClass('scrolled', $(document).scrollTop() > 0);
});

Answer 2

是

nav{
   transition:height 0.5s;
   -webkit-transition:height 0.5s;
   -o-transition:height 0.5s;
   -ms-transition:height 0.5s;
} // Navbar height animated for now
.nav-small{
   height:60px; // Navbar = small
}
.nav-normal{
   height:100px; // Navbar = normal/big
}

现在使用jQuery更改navbar的元素类：

$('nav').addClass('nav-small'); // make navbar small
$('nav').removeClass('nav-normal');

因此CSS会自动制作动画。

Answer 3

基本上不要通过CSS上的ID设置#header_nav高度。

为导航栏的元素高度添加CSS过渡属性，如下所示：

transition:height 0.4s; -webkit-transition:height 0.4s;

设置导航栏高度＆＃34; 100px＆＃34;在style属性中，在HTML正文中。

脚本将是这样的：

function transitionFor(e,p){
    $(e).css('transition',p);
    $(e).css('-webkit-transition',p);
    $(e).css('-o-transition',p);
    $(e).css('-ms-transition',p);
}

transitionFor('#header_nav','height 0.3s');

$(window).scroll(function(e){
    if($(window).scrollTop()<10){ // initial scroll position detected
         $('#header_nav').css('height','100px'); // big
    }else{ // scroll position bigger...
         $('#header_nav').css('height','60px'); // small
    }
});

*推荐：使导航栏溢出隐藏*

这里有效：

http://jsfiddle.net/r4xprh65/13/