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

试试这个，让我知道这是否有效。如果不能，你可以做一个小提琴吗？我绝对可以解决它，但你的标记显示不正确。

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

addClass不工作。我的选择器不够具体吗？

1 个答案: