Question

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

HTML

<script>    
  $(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 200) {
    $("#s-nav").addClass('nav-anim');
  } else $("#s-nav").removeClass('nav-anim');
  });
</script>

CSS

#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;
}

Answer 1

您的脚本正常运行，但当您将课程<link href="https://refreshless.com/noUiSlider/distribute/nouislider.css" rel="stylesheet"/> <script src="https://refreshless.com/noUiSlider/distribute/nouislider.js"></script> <div id="slider-direction"></div> <input id="cadc"> <input id="btcc">应用于.nav-anim时，它将不会应用#s-nav，因为margin:40px 0;选择器是 id ，并且比#s-nav更具体，这是类。

如果您想要应用它，您需要使选择器更强大（ id + class ）：.nav-anim

工作示例：

#s-nav.nav-anim {}

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 100) {
    $("#s-nav").addClass('nav-anim');
  } else 
    $("#s-nav").removeClass('nav-anim');
});

#s-nav {
  position: fixed;
  display: block;
  z-index: 999;
  width: 100%;
  padding: 0; margin: 0;
  top: 0; left: 0;
  background-color: red;
  transition: margin .3s cubic-bezier(.4,0,.2,1);
}

#s-nav.nav-anim {         /* < --- here's the juice */
 margin: 40px 0;
}
body {
  min-height: 200vh;
}

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

1 个答案: