javascript - 如何为粘性导航栏制作动画

Question

我的元素在使用此脚本滚动后有一个粘性标题:

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

我怎样才能让它看起来更漂亮？

Answer 1

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

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

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

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