Apply the "active" class to the list item when its corresponding section is in view

Question

Apply the "active" class to the list item when its corresponding section is in view

I have a webpage with at least four sections. My goal is to dynamically apply the active class to the corresponding menu item when scrolling through each section. For instance, if the "About Us" section is visible on the screen, I want to mark the corresponding menu item as active. The same goes for other sections such as Gallery and Contact Us.

In addition to adding the active class, I also need to change the color and add a bottom border to the active menu item. It's important to note that I prefer not to rely on any external plugins or libraries.

You can check out this example where the active class and styles are applied to the navigation list:

Would it be feasible to achieve this functionality using jQuery?

javascript html jquery css

Answer 1

Answer №1

Hey there! In the code snippet below, I've created a function named activateLink that assigns IDs to links. When a link is clicked, this function adds an active class to the corresponding list item using jQuery.

$(function() {
  $('.smothscrollclass a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top - 100
        }, 1000);
        return false;
      }
    }
  });
});

// The activateLink function
function activateLink (link, section) {
if(section){
    $('html, body').animate({
        'scrollTop' : $("#"+section).position().top
    }, function(){    
       $(".active").removeClass("active");
       $("#"+link).addClass("active");
    });
}else{
 $(".active").removeClass("active");
 $("#"+link).addClass("active");
}
}

// Helper function to check section visibility and update active link
function checkSectionExistance(sectionId, linkId) {
 var element = document.querySelector('#'+sectionId);
var position = element.getBoundingClientRect();

// checking for partial visibility
if(position.top < window.innerHeight && position.bottom >= 0) {
$(".active").removeClass("active");
 $("#"+linkId).addClass("active");
}
}

// Event listener for scroll event
window.addEventListener('scroll', function() {

  checkSectionExistance('aboutus','about-link');
  checkSectionExistance('service','service-link');
  checkSectionExistance('gallery','gallery-link');
  checkSectionExistance('contactus','contact-link');
});

// CSS styles
body {
 // CSS styles here...
}

// More CSS styles...

.active {
border-bottom: 1px solid white;
}

<!-- HTML code goes here... -->

If you have any questions or need further clarification, feel free to let me know!

Answer 2

Hey there! In the code snippet below, I've created a function named activateLink that assigns IDs to links. When a link is clicked, this function adds an active class to the corresponding list item using jQuery.

$(function() {
  $('.smothscrollclass a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top - 100
        }, 1000);
        return false;
      }
    }
  });
});

// The activateLink function
function activateLink (link, section) {
if(section){
    $('html, body').animate({
        'scrollTop' : $("#"+section).position().top
    }, function(){    
       $(".active").removeClass("active");
       $("#"+link).addClass("active");
    });
}else{
 $(".active").removeClass("active");
 $("#"+link).addClass("active");
}
}

// Helper function to check section visibility and update active link
function checkSectionExistance(sectionId, linkId) {
 var element = document.querySelector('#'+sectionId);
var position = element.getBoundingClientRect();

// checking for partial visibility
if(position.top < window.innerHeight && position.bottom >= 0) {
$(".active").removeClass("active");
 $("#"+linkId).addClass("active");
}
}

// Event listener for scroll event
window.addEventListener('scroll', function() {

  checkSectionExistance('aboutus','about-link');
  checkSectionExistance('service','service-link');
  checkSectionExistance('gallery','gallery-link');
  checkSectionExistance('contactus','contact-link');
});

// CSS styles
body {
 // CSS styles here...
}

// More CSS styles...

.active {
border-bottom: 1px solid white;
}

<!-- HTML code goes here... -->

If you have any questions or need further clarification, feel free to let me know!

Answer 3

Answer №2

To achieve this using vanilla JavaScript, you can utilize the document.body.scrollTop; to determine the scroll position. Next, remove the 'active' style from all list items and apply it to the current item. You can do this manually for each item or use a loop like so:

for(let i = 0; i < liClass.length; i++){liClass[i].classList.remove("active")}

. Then, add the 'active' class to the current target by selecting it with an ID or unique class. This process works effectively for me. For jQuery, the concept is similar, just replace $("body").scrollTop().

Answer 4

To achieve this using vanilla JavaScript, you can utilize the document.body.scrollTop; to determine the scroll position. Next, remove the 'active' style from all list items and apply it to the current item. You can do this manually for each item or use a loop like so:

for(let i = 0; i < liClass.length; i++){liClass[i].classList.remove("active")}

. Then, add the 'active' class to the current target by selecting it with an ID or unique class. This process works effectively for me. For jQuery, the concept is similar, just replace $("body").scrollTop().

Answer 5

Answer №3

I made some upgrades and now everything is super clear ;)

When it comes to scrolling, I utilized pure HTML by simply adding an ID to the element where you want to scroll and then including <a href="#theIdOfElement">

The classes were implemented using jQuery as per your request

2nd UPDATE:

let  x=0;
$(document).ready(()=>{
  $("a").click((e)=>{
    //Removes class active from all a-s and all divs
    $("a").removeClass("active");
    $("div").removeClass("active");
    //Adds only to clicked one
    $(e.target).addClass("active");

    //Adds class active to divs that contain the text on which you clicked
    $("div:contains("+ $(e.target).text() +")").addClass("active");
  });
$(document).scroll(()=>{
    $("p").text( $(document).scrollTop());
        if($(document).scrollTop() >= 970){
        //If you want to get style permenent remove line below
    $("div").removeClass("active");
    $("#contacts").addClass("active");
  }
      else if($(document).scrollTop() >= 508){
     //If you want to get style permenent remove line below
    $("div").removeClass("active");
    $("#about").addClass("active");
  }
  else if($(document).scrollTop() >= 8){
     //If you want to get style permenent remove line below
    $("div").removeClass("active");
    $("#home").addClass("active");
  }


  });
})

/*This is for smooth scrolling*/
html {
  scroll-behavior: smooth;
}
.big {
  height: 500px;
  width: 100%;
  border: solid black 1px;
}
.active {
color:red;
}

<div id="main">
<div style="position:fixed;display:flex;justify-content:flex-end;width:100%">
  <p id="demo">0</p>
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#contacts">Contacts</a>
</div>
<div class="big" id ="home">Home</div>
<div class="big" id ="about">About Us</div>
<div class="big" id ="contacts">Contacts</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 6

I made some upgrades and now everything is super clear ;)

When it comes to scrolling, I utilized pure HTML by simply adding an ID to the element where you want to scroll and then including <a href="#theIdOfElement">

The classes were implemented using jQuery as per your request

2nd UPDATE:

let  x=0;
$(document).ready(()=>{
  $("a").click((e)=>{
    //Removes class active from all a-s and all divs
    $("a").removeClass("active");
    $("div").removeClass("active");
    //Adds only to clicked one
    $(e.target).addClass("active");

    //Adds class active to divs that contain the text on which you clicked
    $("div:contains("+ $(e.target).text() +")").addClass("active");
  });
$(document).scroll(()=>{
    $("p").text( $(document).scrollTop());
        if($(document).scrollTop() >= 970){
        //If you want to get style permenent remove line below
    $("div").removeClass("active");
    $("#contacts").addClass("active");
  }
      else if($(document).scrollTop() >= 508){
     //If you want to get style permenent remove line below
    $("div").removeClass("active");
    $("#about").addClass("active");
  }
  else if($(document).scrollTop() >= 8){
     //If you want to get style permenent remove line below
    $("div").removeClass("active");
    $("#home").addClass("active");
  }


  });
})

/*This is for smooth scrolling*/
html {
  scroll-behavior: smooth;
}
.big {
  height: 500px;
  width: 100%;
  border: solid black 1px;
}
.active {
color:red;
}

<div id="main">
<div style="position:fixed;display:flex;justify-content:flex-end;width:100%">
  <p id="demo">0</p>
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#contacts">Contacts</a>
</div>
<div class="big" id ="home">Home</div>
<div class="big" id ="about">About Us</div>
<div class="big" id ="contacts">Contacts</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Apply the "active" class to the list item when its corresponding section is in view

Answer №1

Answer №2

Answer №3

Similar questions

Navigating race conditions within Node.js++]= can be challenging, but there are strategies

While working on my Laravel and Vue.js project, I encountered the following error message: "Module not found: Error: Can't resolve './vue/app' in 'C:vue odolist esourcesjs'"

Is there a way to implement retry functionality with a delay in RxJs without resorting to the outdated retryWhen method?

I tried moving the onchange(this) function from HTML to JavaScript, but I seem to have missed a parameter. The code ends

Exploring Angular Factory: Creating the getAll method for accessing RESTful APIs

Why does adding to an array in the Vuex store replace all existing values with the last entry?

Is there a way to insert animated images in front of every navigation menu item?

Navigate to a particular row in jsgrid

When scraping daily HTML tables with Selenium, I am only able to retrieve the last page

Circular Profile Image

Interactive bar chart that updates in real-time using a combination of javascript, html, and

Struggling with an issue in React and Bootstrap4 while developing an application with create-react-app

Improperly aligned rotation using tween.js and three.js

Troubleshoot: Issue with Multilevel Dropdown Menu Functionality

Technique for updating URL when submitting a form on a webpage

Differences Between APP_INITIALIZER and platformBrowserDynamic with provide

What is the reason that property spreading is effective within Grid components but not in FormControl components?

What is the functionality of ng-repeat in AngularJS when used outside the "jump" table?

Having difficulty aligning divs in the center

Refreshing the webpage without reloading using Ajax ResponseText