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类时，导航将顺利滑下。

请记住浏览器前缀。

<强> example

动画粘贴导航？

1 个答案: