Jquery 为滑入div添加删除类

我有一个标题，有2个位置1绝对和固定当你滚动我需要标题顺利滑入，当你滚动回到顶部它将滑出。。我无法让它滑动，它只是在滚动时显示出来

（函数（$）{
$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>300）{
$（'.header'）.addClass（'fixed'）；
}否则{
$（'.header'）.removeClass（'fixed'）；
}
});
});
})（jQuery）
.header{
位置：绝对位置；
宽度：100%；
高度：86px；
背景：红色；
颜色：#fff；
}
.header.fixed{
宽度：100%；
高度：66px；
位置：固定；
顶部：0px；
背景：#000；
颜色：#fff；
-moz变换：translateY（-130px）；
-ms变换：translateY（-130px）；
-webkit转换：translateY（-130px）；
转换：translateY（-130px）；
转型：转型。5s轻松；
}
.标题.固定{
-moz变换：translateY（0）；
-ms变换：translateY（0）；
-webkit转换：translateY（0）；
变换：translateY（0）；
}

我的部门
内容
在我进入解决方案之前，最好使用
左：0，右：0
生成绝对元素
100%宽度
，而不是
宽度：100%

在
上更改您的样式。已修复
为：

.header.fixed {
  position: fixed;
  // absolute 100% width
  left: 0;
  right: 0;
  height:66px;
  background:#000;
  color: #fff;
  // the slide animation when fixed class appears
  animation: headerSlideIn 0.5s ease;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
} 

// the slide in animation
@keyframes headerSlideIn {
  0% {
    // make it start -66px which is away from your screen
    top:-66px;
  }

  100% {
    // the key to your animation
    top: 0;
  }
}

因此，它将为您提供所需的结果。如果您不喜欢
top
实现，因为它在移动设备上的不稳定行为，只需将其替换为
transform:translateY（）
，并使其成为
top:0

旧代码不起作用的原因还有：

// you overwritten your style above with 0 which simply doesn't do anything
.header.fixed {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

希望有帮助


（函数（$）{
$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>300）
{
$（'.header'）.removeClass（'slide-back'）；
$（'.header'）.addClass（'fixed'）；
}
else if（$（this）.scrollTop（）==0）
{
$（'.header'）.removeClass（'fixed'）；
}
});
});
})（jQuery）
.header{
位置：绝对位置；
左：0；
右：0；
高度：86px；
背景：红色；
颜色：#fff；
过渡：所有0.5s缓解；
}
.标题.固定{
位置：固定；
高度：66px；
背景：#000；
颜色：#fff；
动画：头部滑动0.5s；
动画填充模式：正向；
动画迭代次数：1；
}
@关键帧headerSlideIn{
0% {
顶部：-66px；
}
100% {
排名：0；
}
}

我的部门
内容
如果您向上滚动，它不会滑出，而是消失。没有好的方法可以滑回，因为用户正在移动滚动条，您将看到非常糟糕的缓慢动画。您需要临时决定如何将其拉出，其中之一是在类到达末尾时删除
fixed
类
scrollTop==0
，而不是
scrollTop<300
，或者只是将其默认位置固定。更新了
scrollTop==0
解决方案的答案。