jquery - 添加类不起作用。我的选择器不够具体吗？

Question

$(window).scroll(function() {
    if ($(this).scrollTop() > 150) {
        $( ".background" ).fadeOut();
      	$("a, h1").addClass("fade");
    } else {
        $( ".background" ).fadeIn();
      	$("a, h1").removeClass("fade");
    }
});

//Add Class
.fade
  color: #BBB

//Main
body
  margin: 0
  padding: 0
  font-family: Helvetica

.header
  width: 100%
  height: 100px
  position: fixed
  top: 0px
  z-index: 3
  .background, .labels
    position: absolute
    top: 0px
    width: 100%
    height: 100%
  .labels
    background-color: transparent
  .background
    background-color: #0097A7    
  h1
    float: left
    padding: 11px 0 0 40px
    color: #FFF
  .nav
    float: right
    list-style-type: none
    margin-top: 40px
    li
      display: inline
      padding-right: 60px
      a
        color: #FFF
        font-size: 19px
        text-decoration: none

.content
  width: 100%
  height: 5000px
  background-color: #FFF
  

  

body
  .header
    .background
    .labels
      h1 JB
      ul.nav
        li 
          a(href="#") Work
        li 
          a(href="#") About Me
        li 
          a(href="#") Contact
   .content

试图让标题从蓝绿色淡出到白色(正在 工作)，同时让文本从白色变为黑色。我最终会在 css 中添加一个转换来更改文本，但现在我正在尝试让 addClass 正常工作。

编辑: 我得到它与以下工作:

.fade-in
  transition: opacity, 1s, ease
  color: #000 !important

.fade-out
  transition: opacity, 1s, ease
  color: #FFF !important

和

$(window).scroll(function() {
    if ($(this).scrollTop() > 150) {
        $( ".background" ).fadeOut();
        $("a, h1").removeClass("fade-out");
        $("a, h1").addClass("fade-in");
    } else {
        $( ".background" ).fadeIn();
        $("a, h1").removeClass("fade-in");
        $("a, h1").addClass("fade-out");
    }
});

感谢您的帮助!

Answer 1

试试这个，让我知道它是否有效。如果不能，你能做一个 fiddle 吗？我绝对可以修复它，但您的标记显示不正确。

$(window).scroll(function() {
    if ($(this).scrollTop() > 150) {
        $( ".background" ).fadeOut();
        $("h1, li a").addClass("fade");
    } else {
        $( ".background" ).fadeIn();
        $("h1, li a").removeClass("fade");
    }
});