How can I change tab item style as activated by scrolling?

Question

Here is a simplified of my code:

#header{
  background-color: #f1f1f1;
  height: 30px;
  border-bottom: 1px solid #ccc;
  padding: 10px 15px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
#logo{
  float: left;
  font-weight: bold;
  font-size: 18px;
}
ul{
  display: inline;
}
li{
  display: inline-block;
  padding: 0px 30px;
}
.active{
  color: red !important;
}
a{
  color: gray;
  text-decoration: none;
}
#container{
  margin-top: 70px;
}

<div id="header">
  <div id="logo">LOGO</div>
  <ul id="tabs">
    <li><a href="#i1" class="active">Item 1</a></li>
    <li><a href="#i2">Item 2</a></li>
    <li><a href="#i3">Item 3</a></li>
    <li><a href="#i4">Item 4</a></li>
  </ul>
</div>

<div id="container">
  <div id="i1">
    <h2>Item 1</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i2">
    <h2>Item 2</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i3">
    <h2>Item 3</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i4">
    <h2>Item 4</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
</div>

All I'm trying to do is changing the color of items (in the header) by scrolling. I mean I want to add .active class to a[href="i2"] (making it red) element when user scrolls and div#i2 comes in the top of page. How can I do that?

Can I change class property based on the scrolling?

Answer 1

You can use scrollTop() to find the current scroll, and offset().top for each block, here is the code.

$(window).scroll(function(){
  var x = $(window).scrollTop();
  var i1 = $('#i1').offset().top;
  var i2 = $('#i2').offset().top;
  var i3 = $('#i3').offset().top;
  var i4 = $('#i4').offset().top;
  var offset = 110; //px
  //console.log(i1,i2,i3,i4,x);
  if(x>i1 - offset && x < i2){
    $('.links').removeClass('active');
    $("a[href='#i1']").addClass('active');
  }
  if(x>i2 - offset && x < i3){
    $('.links').removeClass('active');
    $("a[href='#i2']").addClass('active');
  }
  if(x>i3 - offset && x < i4 ){
    $('.links').removeClass('active');
    $("a[href='#i3']").addClass('active');
  }
  if(x>i4 || ($(window).scrollTop() + $(window).height() == $(document).height())
  ){
    $('.links').removeClass('active');
    $("a[href='#i4']").addClass('active');
  }
  
  
});

#header{
  background-color: #f1f1f1;
  height: 30px;
  border-bottom: 1px solid #ccc;
  padding: 10px 15px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
#logo{
  float: left;
  font-weight: bold;
  font-size: 18px;
}
ul{
  display: inline;
}
li{
  display: inline-block;
  padding: 0px 30px;
}
.active{
  color: red !important;
}
a{
  color: gray;
  text-decoration: none;
}
#container{
  margin-top: 70px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <div id="logo">LOGO</div>
  <ul id="tabs">
    <li><a href="#i1" class="links active">Item 1</a></li>
    <li><a href="#i2" class="links " >Item 2</a></li>
    <li><a href="#i3" class="links ">Item 3</a></li>
    <li><a href="#i4" class="links ">Item 4</a></li>
  </ul>
</div>

<div id="container">
  <div id="i1">
    <h2>Item 1</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i2">
    <h2>Item 2</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i3">
    <h2>Item 3</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i4">
    <h2>Item 4</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
</div>

Answer 2

WITHOUT JQUERY:

 // To remember the current active tab
 let currentTab = 1 ;

 // Without jQuery, I get the parent items top
 let topContainer = document.getElementById('container').offsetTop;

 // I get the top of each item, in a table
 let stateItems = {};

 for(let i = 1 ; i < 5 ; ++ i)
 {
   stateItems[i] = {
     top: topContainer + document.getElementById('i'+i).offsetTop,
     actived: i == 1
   };
 }

 // To adjust: I want the active class to be applied just
 // when the title reachs the top of the window (under the header)
 const DecFromTop = 120 ;

 // I deal with scroll event
 window.onscroll = function(evt){

    // the current scroll, adjusted
    let wY = window.scrollY + DecFromTop;

    // For convenience (see above)
    let topItem = 0 ;
    
    // A loop on each tab
    for(let i = 1 ; i < 5 ; ++ i){

      // Can't be this one
      if ( i == currentTab ) { continue } ;

      // I take the item top props
      topItem = stateItems[i];

      // I only apply and remove class on ± 10 px, once

      if ( wY > topItem.top - 10 && wY < topItem.top + 10)
      {
        // <= Scrolling ± 10 px the current checked item
        // => I have to change the current tab

        // Once

        if ( false == topItem.actived ) 
        {
          // <= Not actived yet
          // => I have to activate it and desactivate the current
 
          // Remove prev tab class
          document.getElementById('tab'+currentTab).className = '';
          stateItems[currentTab].actived = false ;
        
          // Add new tab class
          document.getElementById('tab'+i).className = 'active';
          topItem.actived = true ;

          // Remember current tab
          currentTab = i;
        }
      }
    }
  }
  

   #header{
      background-color: #f1f1f1;
      height: 30px;
      border-bottom: 1px solid #ccc;
      padding: 10px 15px;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
    }
    #logo{
      float: left;
      font-weight: bold;
      font-size: 18px;
    }
    ul{
      display: inline;
    }
    li{
      display: inline-block;
      padding: 0px 30px;
    }
    .active{
      color: red !important;
    }
    a{
      color: gray;
      text-decoration: none;
    }
    #container{
      margin-top: 70px;
    }

<div id="header">
  <div id="logo">LOGO</div>
  <ul id="tabs">
    <li><a id="tab1" href="#i1" class="active">Item 1</a></li>
    <li><a id="tab2" href="#i2">Item 2</a></li>
    <li><a id="tab3" href="#i3">Item 3</a></li>
    <li><a id="tab4" href="#i4">Item 4</a></li>
  </ul>
</div>

<div id="container">
  <div id="i1">
    <h2>Item 1</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i2">
    <h2>Item 2</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i3">
    <h2>Item 3</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
  <div id="i4">
    <h2>Item 4</h2>
    <p> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text  here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text <br><br> here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text here is some text </p>
  </div>
</div>