I want to add a active class when scroll my page. when href and top navbar id is same then add a active class for highlight this nav

$(document).ready(function(){
        $(window).scroll(function() {
            $.each(items, function(key, value){
               var item = $(value);
               if(window.scrollTop() >= item.offset().top){
                   $('.menu a.active').removeClass('active');
                   var id = item.attr('id');
                   console.log(id);
                   $.each(navItems, function(key, value){
                      var navItem = $(value);
                      if(navItem.attr('href') == '#' id) navItem.addClass('active');
                    });
                  }
              });
            });
          });

ul.menu{
position: fixed;
top: 0;
}
ul.menu li{
display:inline-block;
list-style: none;
margin-right: 10px;
}

.menu li a{
text-decoration: none;
}

a.active{
color: red;
}

#home{
margin-top: 80px;
}

#home, #profile, #aboutus, #contactus{
min-height: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul >
<li><a href="#home" >Home</a></li>
<li><a href="#profile" >Profile</a></li>
<li><a href="#aboutus" >About Us</a></li>
<li><a href="#contactus" >Contact Us</a></li>
</ul>

<div id="home">
<h3>this is home</h3>
</div>
<div id="profile">
<h3>this is profile</h3>
</div>
<div id="aboutus">
<h3>this is aboutus</h3>
</div>
<div id="contactus">
<h3>this is contactus</h3>
</div>

Here is above my code but its not working show scrollTop is not a function and class is not added when i scroll the page..

CodePudding user response：

scrollTop is a property, not a function, so doesn't want the bracketed scrollTop() examples

CodePudding user response：

Thank you for providing a working example. Below is working code, had to touch html and css as well (don't forget to update that in your code).

$(document).ready(function() {
  // cache the navigation links 
  var $navigationLinks = $('#navigation > ul > li > a');
  // cache (in reversed order) the sections
  var $sections = $($(".section").get().reverse());

  // map each section id to their corresponding navigation link
  var sectionIdTonavigationLink = {};
  $sections.each(function() {
    var id = $(this).attr('id');
    sectionIdTonavigationLink[id] = $('#navigation > ul > li > a[href=\\#'   id   ']');
  });

  function highlightNavigation() {
    // get the current vertical position of the scroll bar
    var scrollPosition = $(window).scrollTop();

    // iterate the sections
    $sections.each(function() {
      var currentSection = $(this);
      // get the position of the section
      var sectionTop = currentSection.offset().top;

      // if the user has scrolled over the top of the section  
      if (scrollPosition >= sectionTop) {
        // get the section id
        var id = currentSection.attr('id');
        // get the corresponding navigation link
        var $navigationLink = sectionIdTonavigationLink[id];
        // if the link is not active
        if (!$navigationLink.hasClass('active')) {
          // remove .active class from all the links
          $navigationLinks.removeClass('active');
          // add .active class to the current link
          $navigationLink.addClass('active');
        }
        // we have found our section, so we return false to exit the each loop
        return false;
      }
    });
  }

  $(window).scroll(highlightNavigation);
});

#navigation {
  position: fixed;
}

ul.menu li {
  display: inline-block;
  list-style: none;
  margin-right: 10px;
}

.menu li a {
  text-decoration: none;
}

#home {
  margin-top: 80px;
}

#home,
#profile,
#aboutus,
#contactus {
  min-height: 150px;
}

.section {
  height: 700px;
  border: 1px solid black;
}

.active {
  color: red;
}

<div id="navigation">
  <ul >
    <li><a href="#home" >Home</a></li>
    <li><a href="#profile" >Profile</a></li>
    <li><a href="#aboutus" >About Us</a></li>
    <li><a href="#contactus" >Contact Us</a></li>
  </ul>
</div>
<div id="sections">
  <div id="home" >
    <h3>this is home</h3>
  </div>
  <div id="profile" >
    <h3>this is profile</h3>
  </div>
  <div id="aboutus" >
    <h3>this is aboutus</h3>
  </div>
  <div id="contactus" >
    <h3>this is contactus</h3>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The overall answer was inspired from link.