Javascript CSS动画在返回之前会下降

我试图有一个导航栏，导航项目会被拉上，当用户滚动时，徽标会收缩，当用户向上滚动时，会向下滚动

但目前导航项目在上升之前下降…当它恢复时，它在不同的位置结束

HTML:

Javascript:

$(window).scroll(function() {
   if ($(document).scrollTop() > 150) {
     $('.navbar').addClass('shrink');
     $('.nav-items').addClass('margin');
   } else {
     $('.navbar').removeClass('shrink');
     $('.nav-items').addClass('margin');
   }
});

JS小提琴：

---

菜单栏上出现冒泡运动的原因是因为

.nav-items {
  background: #fff;
  -webkit-transition: all 1.0s ease;/* Duplicate Transition. you already have a transition on your nav tag
  transition: all 1.0s ease; /* Duplicate Transition. you already have a transition on your nav tag
}

取出两行

-webkit transition:all 1.0s ease

和

transition:all 1.0s ease从上面开始

注意：在chrome版本46.0.2490.71中进行了测试，而且…它的行为更像我在JSFIDLE上希望它的方式…但在本地，当我向下滚动时，它的行为不同（使用chrome）…导航项先稍微上升一点。。。当我向上滚动时…导航项目在初始点停止，然后向后下降一点。您的意思是运行
$（'.nav items'）.addClass（'margin'）两次？
$(window).scroll(function() {
   if ($(document).scrollTop() > 150) {
     $('.navbar').addClass('shrink');
     $('.nav-items').addClass('margin');
   } else {
     $('.navbar').removeClass('shrink');
     $('.nav-items').addClass('margin');
   }
});

.nav-items {
  background: #fff;
  -webkit-transition: all 1.0s ease;/* Duplicate Transition. you already have a transition on your nav tag
  transition: all 1.0s ease; /* Duplicate Transition. you already have a transition on your nav tag
}