State of Active Scroll group

How can I dynamically add the "active" class to a link based on which section it has scrolled to?

I want the active state to be applied without a hover effect, only when the corresponding section is currently in view.

#pagemenu{
display: block;
position: fixed;
top: 40%;
font-size: 12px;
text-transform: uppercase;

}


#pagemenu ul{
list-style: none;
display: block;
margin-left: 0;
}

.pagelink{
display: block;
height: 38px;
width: 200px;
margin-bottom: 6px;
border-left: 2px solid red;
color: red;
padding-left: 10px;
padding-top: 10px;
}


.active2{
background-color: #424242;
border-left: 2px solid #e1b130;
color: #e1b130;
}
​
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagemenu">
<a class="pagelink active2" href="#">Link Here</a>
<a class="pagelink" href="#">Link Here</a>
<a class="pagelink" href="#">Link Here</a>
<a class="pagelink" href="#">Link Here</a>
</div>​

htmlcss

Answer №1

To incorporate the functionality using JavaScript, follow these steps:

  • Identify and select all anchor elements with the class pagelink
  • Attach a click event listener to each of these elements
  • Create a CSS class in your stylesheet named highlight
  • Upon clicking an anchor tag, remove any existing highlighted background color from all elements and apply it only to the currently active anchor link

Refer to the code snippet below for implementation details:

function highlight(e) {
  for (var x = 0; x < all_anchors.length; ++x) {
    if (e.target != all_anchors[x]) {
      all_anchors[x].classList.remove("highlight");
    } else {
      all_anchors[x].classList.add("highlight");
    }
  }
}
all_anchors = document.getElementsByClassName("pagelink");
for (var x = 0; x < all_anchors.length; ++x) {
  all_anchors[x].addEventListener("click", highlight);
}
#pagemenu {
  display: block;
  position: fixed;
  top: 40%;
  font-size: 12px;
  text-transform: uppercase;
}

#pagemenu ul {
  list-style: none;
  display: block;
  margin-left: 0;
}

.pagelink {
  display: block;
  height: 38px;
  width: 200px;
  margin-bottom: 6px;
  border-left: 2px solid red;
  color: red;
  padding-left: 10px;
  padding-top: 10px;
  transition: all 0.5s;
  text-decoration: none;
}

.active2 {
  background-color: #424242;
  border-left: 2px solid #e1b130;
  color: #e1b130;
}

.highlight {
  background-color: #424242;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagemenu">
  <a class="pagelink" href="#">Link Here</a>
  <a class="pagelink" href="#">Link Here</a>
  <a class="pagelink" href="#">Link Here</a>
  <a class="pagelink" href="#">Link Here</a>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an error stating 'Chart name not found' while attempting to utilize chart.js

For days now, I've been struggling with an annoying issue in chart js. I've tried every possible solution but have not been able to figure it out. The problem arises from using a TypeScript environment with ES modules. I attempted to import Char ...

javascripthtmltypescriptchart.js

The Vanishing Act of Bulma Dropdowns in Vue Router

On regular pages, the dropdown feature functions flawlessly. However, when using Vue-router in a single-page application (SPA), the dropdown menu seems to vanish between the navbar-item and its child navbar-link unless the cursor is moved quickly from one ...

cssvue-routerbulma

Tips for showcasing cards in a horizontal inline layout

Hello everyone! I'm currently working on creating dynamic cards, but I'm having trouble displaying them inline. I'd like to arrange the cards horizontally with a scroll bar. https://i.sstatic.net/zqcua.png I want to make them display in ho ...

htmlcssreactjsfrontend

Retrieve the class that corresponds to the element in the given list

In my JavaScript code, I have a NodeList of elements that were selected by querying multiple classes. I am using a "for" loop to iterate through the list. What I need is a concise one-liner to quickly determine which class each element was selected by so I ...

javascripthtmldom

The remove() function is failing to eliminate the element from all parent elements with the same class

I have a bunch of Wordpress posts. When the browser size is reduced to a certain point, I must relocate one specific element from each post to another element as per the design requirements. Here is the code I am using to iterate through each post and mov ...

javascriptjqueryhtml

Is it possible to utilize jQuery for dynamically generating a file along with its content?

Here is the HTML snippet I am working on: <ul> <li> Download <a href="#">file1</a> </li> <li> Download <a href="#">file2</a> </li> <li> Download <a href="#">file3</a> </li> ...

javascriptjqueryajaxhtml

Trouble arises when attempting to append a class through ng-class upon clicking

In a specific scenario, I am trying to change the border color from black to red in a div by appending a class using ng-class when clicked. However, when clicking a button, the modal opens but the class is not being appended as expected. <div ng-class ...

javascriptcssangularjs

Struggling with updating the background color of multiple HTML elements with the same class in real-time

I'm facing an issue with dynamically updating background colors of specific elements using ajax, JSP, and a servlet call. Even though all the lines of code seem to be executing, there is no visible change on the front end. I've attached my JS fun ...

javascripthtmlcssajaxservlets

JavaScript can be used to create dynamic frames within a

Can anyone help identify the issue in my code? frame 1 <script type="text/javascript"> var Clicks = 0 ; function AddClick(){ Clicks = Clicks + 1; document.getElementById('CountedClicks').innerHTML = Clicks ; } localStorage.setItem(' ...

javascripthtmlframeframes

Eliminating the issue of double scroll bars that overlap each other

Currently, I am developing a website that utilizes javascript, html, and css. One of the pages on the site displays all users as list items within an unordered list, which is nested inside two separate div elements. When accessing the page on my phone, bot ...

htmlcss

When two divs are activated, the third div goes into invisible mode

I attempted this code, but it doesn't appear to be functioning correctly. if(div1)&& (div2)==display:none { div3=display:none; } else { div3=display:block; } ...

javascriptcss

Change HTML to PDF with the ability to split text at page breaks

I recently attempted to convert an HTML/CSS document into a PDF file using the pdflayer.com API. Everything seemed to be working well, but I encountered a problem with line breaks splitting lines, as shown in this photo: https://i.sstatic.net/1tqKM.jpg I ...

htmlcsspdfhtml2pdfhtml-to-pdf

What is the best way to design unconventional grids using Bootstrap 4?

Is it possible to achieve unique grid layouts in Bootstrap 4? For instance, An irregular grid where the first column covers two rows, followed by two rows with three columns each |||||||||||||||| | | | | | | |_ |_ |_ | | | | | | |_____| ...

csshtmlbootstrap-4bootstrap-grid

Whenever I enter a narrative into my text box, it must interact with this API

Whenever I enter a story in the text box, it should trigger this API call: The retrieved data should be displayed in the browser. Currently, the API call is not being made. All the relevant code can be found in 'searchbar.js'. Could you please ...

javascripthtmlreactjsapiredux

Enhancing Element Visibility with CSS Centering

HTML <div class="container1"> <ul class="menu-dropdown"> <li>item</li> </ul> <div> CSS .menu-dropdown{ display: none; } .container1:focus .menu-dropdown{ display: block; } I am attempting to cr ...

htmlcssfocus

Ways to center text in a div using vertical alignment

/* Styles for alignment */ .floatsidebar { height: 100%; float: left; overflow: hidden; width: 30px; line-height: 1.5; } .vertical-text { height: 100%; display: inline-block; white-space: nowrap; transform: translate(0, 100%) rotate(-90 ...

htmlcss

Which programming language is best suited for this task?

Seeking assistance with changing an image inside a div to another image with a simple mouse click. Wondering if this can be achieved through CSS or if jQuery would be the better option. Here is the code snippet: <div id="slideshow"> <img ...

jqueryhtmlcss

Executing operations on checkboxes on a webpage without access to model files

I am facing an issue with accessing the models file due to encryption in the software. Currently, my checkboxes are implemented using Ajax within a PHP query. Since it is Ajax-based, I am unable to manipulate actions through the URL. My goal is to extract ...

javascriptphphtml

Trouble with selecting a color from the picker tool

Working with HTML markup often presents challenges, especially when it comes to using a color picker on Mac OS. I find that trying to match the exact background color of a div element by picking up color from an image can be tricky. After using the Mac co ...

htmlcss

Menu Overlay (jQuery/CSS)

I am in the process of developing a website that is optimized for both mobile and desktop devices. I am currently brainstorming ideas for the main navigation, which I envision as an overlay that slides down similar to . However, I am struggling to create ...

jqueryhtmlcss