CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Isaiah Kahler
Isaiah Kahler

Reputation: 89

jQuery Add and Remove Classes When Scrolling

Help! I'm in the process of developing a site and I need my navbar links to change color when scrolling down the page. I want it to indicate what current part of the page the user is on. My code:

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 the jsfiddle

for the life of me I can't figure out why the links aren't changing color at the right times. It could be something as simple as the call function. Please Help me.

Upvotes: 1

Views: 130

Answers (1)

pizzarob
pizzarob

Reputation: 12029

I kind of just piggy backed of your code to make it work the way you wanted. You had some syntax errors. Missing the period when querying classes in your jQuery and missing a quote in the 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/

Upvotes: 2

Related Questions