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');}
});

aaaannndd the 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/

jQuery在滚动时添加和删除类

1 个答案: