javascript - jQuery 在滚动时添加和删除类

Question

帮助!我正在开发一个网站，我需要我的导航栏链接在向下滚动页面时改变颜色。我希望它指示用户所在页面的当前部分。我的代码:

HTML

<nav class="fixed navbar">
    <ul>
        <li class="linkone"><a href="#home">home</a></li>
        <li class="linktwo"><a href="#posts">about</a></li>
        <li class="linkthree"><a href="#contact">posts</a></li>
        <li class="linkfour"><a href="#contact">contact</a></li>
    </ul>
</nav>

<section class="scroll scroll1>
    <h1>Scroll 1</h1>
</section>

<section class="scroll scroll2">
    <h1>Scroll 2</h1>
</section>

<section class="scroll scroll3">
    <h1>Scroll 3</h1>
</section>

<section class="scroll scroll4">
    <h1>Scroll 4</h1>
</section>

CSS

.fixed{
  position: fixed;
}
.navbar{
  background-color: #333333;
}
.darker{
  color: #000000;
}
.scroll{
  height: 100vh;
  width: 100vw;
}
.scroll1{
  background-color: #555555;
}
.scroll2{
  background-color: #666666;
}
.scroll3{
  background-color: #777777;
}
.scroll4{
  background-color: #888888;
}

jQuery/JS

$(window).scroll(function() {
  if ($(document).scrollTop() > ('scroll1').height()) {
    $('.linktwo').addClass('darker');
    $('.linkone').removeClass('darker');
  } else if ($(document).scrollTop() > ('scroll2').height()){
    $('.linkthree').addClass('darker');
    $('.linktwo').removeClass('darker');
  } else if ($(document).scrollTop() > ('scroll3').height()){
    $('.linthree').addClass('darker');
    $('.linktwo').removeClass('darker');}
});

aaaannnnddd jsfiddle

我一辈子都弄不明白为什么链接没有在正确的时间改变颜色。它可以像调用函数一样简单。请帮助我。

Answer 1

我有点依赖你的代码，让它按照你想要的方式工作。你有一些语法错误。在 jQuery 中查询类时缺少句号，在 HTML 中缺少引号

jQuery

$(window).scroll(function() {
  var scroll1 = $('.scroll1').offset().top;
  var scroll2 = $('.scroll2').offset().top;
  var scroll3 = $('.scroll3').offset().top;1
  var docScroll = $(document).scrollTop();
  $('a').removeClass('darker');
  if (docScroll > scroll1 && docScroll < scroll2 && docScroll < scroll3) {
    $('.linktwo a').addClass('darker');
  } else if (docScroll > scroll1 && docScroll > scroll2 && docScroll < scroll3) {
    $('.linkthree a').addClass('darker');
  } else if (docScroll > scroll1 && docScroll > scroll2 && docScroll > scroll3) {
    $('.linkfour a').addClass('darker');
  } else{
    $('.linkone a').addClass('darker');
  }
});

HTML

<nav class="fixed navbar">
  <ul>
    <li class="linkone darker"><a href="#home">home</a></li>
    <li class="linktwo"><a href="#posts">about</a></li>
    <li class="linkthree"><a href="#contact">posts</a></li>
    <li class="linkfour"><a href="#contact">contact</a></li>
  </ul>
</nav>

<section class="scroll scroll1">
  <h1>Scroll 1</h1>
</section>

<section class=" scroll scroll2 ">
  <h1>Scroll 2</h1>
</section>

<section class="scroll scroll3 ">
  <h1>Scroll 3</h1>
</section>

<section class="scroll scroll4 ">
  <h1>Scroll 4</h1>
</section>

http://jsfiddle.net/zpdbd8vy/5/