0

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 class="menu">
<li><a href="#home" class="active">Home</a></li>
<li><a href="#profile" class=" ">Profile</a></li>
<li><a href="#aboutus" class="">About Us</a></li>
<li><a href="#contactus" class="">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..

Shawn
  • 1,232
  • 1
  • 14
  • 44

2 Answers2

1

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 class="menu">
    <li><a href="#home" class="active">Home</a></li>
    <li><a href="#profile" class="">Profile</a></li>
    <li><a href="#aboutus" class="">About Us</a></li>
    <li><a href="#contactus" class="">Contact Us</a></li>
  </ul>
</div>
<div id="sections">
  <div id="home" class="section">
    <h3>this is home</h3>
  </div>
  <div id="profile" class="section">
    <h3>this is profile</h3>
  </div>
  <div id="aboutus" class="section">
    <h3>this is aboutus</h3>
  </div>
  <div id="contactus" class="section">
    <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.

first
  • 616
  • 1
  • 7
  • 13
  • The console shows some vuejs and 'resizable' jquery function errors which do not come under the scope of this question. And the reason why 'Dips' never gets highlighted is because scroll never touches the 'Dips' section so no highlighting occurs. Try adding some 'margin-bottom' to the section to increase scroll area. And regarding that weird on click nav link thing, you can do something like disable the scroll highlighting function whenever navigation link is clicked except 'All' and do a simple background highlighting instead. – first Jun 25 '22 at 18:13
  • So i want Only in ALL tabs will be added the active class but not others how to add this? – Shawn Jun 25 '22 at 18:27
  • 1
    Yes since you have a single a page application so the idea would be easy to implement, obviously you want links to highlight when scrolled and that happens only when 'All' is clicked (and all sections are available to view), Now you can simply disable the scroll highlighting function for other links (because you do not need it there) and make it available for 'All' only so the weird highlighting do not happen. And just do a background highlighting when links are clicked. – first Jun 25 '22 at 19:17
  • can you please give me a idea where can i give margin bottom to avoid the last tab active class auto.. https://www.kwikorder.online/shop/madchef – Shawn Jun 26 '22 at 09:05
  • btw how to disable the other active class i want only in ALL tabs – Shawn Jun 26 '22 at 09:24
  • I am not sure what's happening under the hood but can you call the scroll highlighting function for 'All' only? (make it a click event for 'All' tab only when it is clicked). This way you do not need that disabling thing. – first Jun 26 '22 at 11:23
0

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

quilkin
  • 874
  • 11
  • 31