$(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");
    }
});


感谢您所有的帮助!

最佳答案

试试这个,让我知道是否可行。如果不能,您可以摆弄小提琴吗?我绝对可以解决它,但您的标记显示不正确。

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

关于jquery - addClass不起作用。我的选择器不够具体吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28865241/

10-13 00:43