如何为粘性导航栏设置动画答案

【问题标题】：How can I animate a sticky navbar如何为粘性导航栏设置动画
【发布时间】：2017-02-05 12:39:32
【问题描述】：

我的项目在滚动后有一个使用此脚本的粘性标题：

$(document).ready(function() {

  $(window).scroll(function () {
      //if you hard code, then use console
      //.log to determine when you want the 
      //nav bar to stick.  
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 385) {
      $('#nav').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 386) {
      $('#nav').removeClass('navbar-fixed');
    }
  });
});

如何制作动画以使其看起来更好？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以像这样为固定导航栏设置动画：

.navbar-fixed {
    animation: mymove 0.2s ease-in-out;

    @keyframes mymove {
      from {
        top: -20px;
      }
      to {
        top: 0px;
      }
    }
}

将导航栏元素从 -20px 移动到 0px 顶部。动画持续 0.2 秒。希望这对你有帮助:)

【讨论】：

【解决方案2】：

您也可以使用jQuery animations。因为你已经在使用 jQuery

【讨论】：

【解决方案3】：

您可以使用 CSS 和关键帧为添加和删除的类设置动画。下面是通过使用关键帧进行平滑滚动的类似问题 smooth scrolling sticky header

【讨论】：