CODEWITHSUNDEEP
javascriptjqueryhtml
Leader
Leader

Reputation: 68

Add/Remove Class on Scroll

I'm sorry if the question title isn't specific enough... but I really have no idea about the name of the feature I'm aiming here...

Here is the basic stuff at jsfiddle

<style>
body { margin: 0; text-align: center; }
ul { margin: 0; padding: 0; list-style: none; position: fixed; top: 0; width: 100%; display: flex; }
li { flex: 1; padding: 10px; border-bottom: 1px solid black; background: #fff; }
.current { background-color: #eee; }
#content { margin-top: 50px; }
#content > div { padding: 500px 15px; }
#content > div + div { border-top: 1px solid black; }
</style>

<ul id="nav">
  <li id="nav-1" class="current">No.1</li>
  <li id="nav-2">No.2</li>
  <li id="nav-3">No.3</li>
  <li id="nav-4">No.4</li>
  <li id="nav-5">No.5</li>
</ul>

<div id="content">
  <div id="content-1">#01: “First Chapter”</div>
  <div id="content-2">#02: “Second Chapter”</div>
  <div id="content-3">#03: “Third Chapter”</div>
  <div id="content-4">#04: “Fourth Chapter”</div>
  <div id="content-5">#05: “Fifth Chapter”</div>
</div>

Some of the sites which I've seen using such feature are all using specific scripts, where one would need to made minor changes to the javascript when the number on objects in the content/nav changed.

I'm hoping to know a script where it could handle dynamic number of objects in the content/nav.

Can anyone show me how to do it?

Thank You.

Upvotes: 1

Views: 996

Answers (1)

Sofiene Djebali
Sofiene Djebali

Reputation: 4508

This should be what you're looking for :

Javascript

$(document).ready(function(){
  $(window).scroll(function(e){    
        for (var i = 1; i < $('#nav li').length; i++) {
            if($(window).scrollTop() > $('#content-'+i).position().top){
                $('#nav li').removeClass('current');
                $('#nav-'+i).addClass('current');
            } 
        };        
    })   
});

http://jsfiddle.net/f7fg9t6e/1/

Do not forget to add jQuery to your project ;)

Upvotes: 1

Related Questions