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.2秒。希望对您有帮助：）

Answer 2

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

Answer 3

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

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

3 个答案: