[Solved] How to addClass active using on scroll but not using a href id?

by


Here you go with a solution https://jsfiddle.net/25fd6nov/

$('.click a').click(function(e){
  e.preventDefault();
  $(this).parent().addClass('active').siblings('li').removeClass('active');
  var id = $(this).data('href');
  $('html, body').animate({
      scrollTop: $("#" + id).offset().top
  }, 1000);
});
.active {
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu-center">
    <ul class="click crsl">
        <li class="active"><a class="page1 dot" data-href="home">Home</a></li>
        <li><a class="page2 dot" data-href="blog">Blog</a></li>
        <li><a class="page3 dot" data-href="about">About</a></li>
        <li><a class="page4 dot" data-href=contact>Contact</a></li>
    </ul>
</nav>

Updated Solution https://jsfiddle.net/25fd6nov/1/

$('.click a').click(function(e){
	e.preventDefault();
  $(this).parent().addClass('active').siblings('li').removeClass('active');
  var id = $(this).data('href');
  $('html, body').animate({
      scrollTop: $("#" + id).offset().top
  }, 1000);
});

$('#main').scroll(function(){
    var element_height = 300;
    var offset = $('#scrollContainer').offset();
    var positive =  Math.abs(offset.top)
    var divided = positive / element_height;
    var round = Math.round(divided);

    var current_element = $('#scrollContainer').children().eq(round);
    var id = current_element.attr('id');

    $(`li[data-li=${id}]`).addClass('active').siblings('li').removeClass('active');

});
.active {
  font-weight: bold;
}

#main {
  width: 100%;
  height: 400px;   
  overflow: auto;
}
#home{
  height: 300px;
  background: red;
  width: 100%;
}

#about{
  height: 300px;
  background: blue;
  width: 100%;
}

#blog{
  height: 300px;
  background: orange;
  width: 100%;
}

#contact{
  height: 300px;
  background: green;
  width: 100%;
}

#scrollContainer{
  positive: relative;
  height: 1200px;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu-center">
    <ul class="click crsl">
        <li class="active" data-li="home"><a class="page1 dot" data-href="home">Home</a></li>
        <li data-li="blog"><a class="page2 dot" data-href="blog">Blog</a></li>
        <li data-li="about"><a class="page3 dot" data-href="about">About</a></li>
        <li data-li="contact"><a class="page4 dot" data-href=contact>Contact</a></li>
    </ul>
</nav>

<div id="main">
  <div id="scrollContainer">
    <div id="home"></div>
    <div id="blog"></div>
    <div id="about"></div>
    <div id="contact"></div>
  </div>
</div>

Hope this will help you.

4

solved How to addClass active using on scroll but not using a href id?