Html 当用户位于页面顶部时应用css

当用户位于页面顶部时，尝试将css应用于我的导航。这是我的代码，但不起作用

html

---

您的脚本正在工作，但当您将类

.nav anim

应用于

#s-nav

时，它将不会应用

边距：40px 0#s-nav

选择器是一个id，比

.nav anim

更具体，后者是一个类

如果要应用它，需要使选择器更强大（id+class）：

#s-nav.nav-anim{}

工作示例：

$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>=100）{
$（“#s-nav”）.addClass（'nav-anim'）；
}否则
$（“#s-nav”）.removeClass（'nav-anim'）；
});
#s-nav{
位置：固定；
显示：块；
z指数：999；
宽度：100%；
填充：0；边距：0；
顶部：0；左侧：0；
背景色：红色；
过渡：边距.3s三次贝塞尔（.4,0,2,1）；
}
#s-nav.nav-anim{/*<---这是果汁*/
利润率：40px0；
}
身体{
最低高度：200vh；
}

导航
哦，好吧，我想我有一个更大的问题。谢谢
<script>    
  $(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 200) {
    $("#s-nav").addClass('nav-anim');
  } else $("#s-nav").removeClass('nav-anim');
  });
</script>

#s-nav {
  position: fixed;
  display: block;
  z-index: 999;
  width: 100%;
  padding: 0; margin: 0;
  top: 0; left: 0;
  background-color: red;
}

.nav-anim {
 margin: 40px 0;
}