使用CSS的导航栏高度转换

Question

目前我正在使用以下JavaScript来制作导航栏的动画。有没有一种方法可以用CSS转换/动画来做到这一点？

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:更改导航栏的元素类

$('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;

在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/