jquery - 动画粘性导航？

Question

我正在尝试为粘性导航制作动画 - 我想要做的是让它平滑地反弹。我该怎么做？

我有以下 .js 脚本:

    var  mn = $(".menu");
    mns = "menu-scrolled";
    hdr = $('.menu').height() + $('.navigation').height();

    $(window).scroll(function() {
      if( $(this).scrollTop() > hdr ) {
        mn.addClass(mns);
      } else {
        mn.removeClass(mns);
      }
    });

我使用以下代码作为引用:http://codepen.io/Guilh/pen/JLKbn

Answer 1

我们可以使用 css 动画来为导航的 top 属性设置动画:

.main-nav-scrolled {
   -webkit-animation:bounce 0.5s forwards;
}
@-webkit-keyframes bounce {
  from {
    top: -200px;  
  }
  to {
    top: 0; 
  }
}

每当通过 javascript 添加 .main-nav-scrolled 类时，nav 将平滑地向下滑动。

还要记住浏览器前缀。

example