使用 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

是的。

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
}

现在将导航栏的元素 class 更改为 jQuery:

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

因此 CSS 将自动设置动画。

Answer 2

您可以添加 CSS 转换，然后 add/remove 一个 class。

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 3

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

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

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

在 HTML 主体的 style 属性中设置导航栏高度“100px”。

脚本应该是这样的：

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/