Question 45151 in Html Question posted in
Some basic documentation can be found here.

Get the id of current section on scroll in JavaScript – Html

I’m trying to build a dot navigation kind of thing, i.e., when you click on each "div" it takes you to the specific section, which is currently implemented.

But, also while scrolling I need to change the current state of this div’s to active. How do I do that?

An image on how the dot navigation looks.

enter image description here

I was looking how to get scroll positions of each section and assign them to each variables and run some function.

<div class="dot-navigation">
  <div>
    <a href="#home"></a>
  </div>
  <div>
    <a href="#about"></a>
  </div>
  <div>
    <a href="#services"></a>
  </div>
  <div>
    <a href="#clients"></a>
  </div>
  <div>
    <a href="#reviews"></a>
  </div>
  <div>
    <a href="#contactus"></a>
  </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks, Angelina for your comment.

    I found this to be useful https://www.youtube.com/watch?v=fAAk9CATILc

    let section = document.querySelectorAll("section");
let dotNav = document.querySelectorAll(".dot-navigation div a");

window.onscroll = () => {
    section.forEach((sec) => {
        let top = window.scrollY;
        let offset = sec.offsetTop - 200;
        let height = sec.offsetHeight;
        let id = sec.getAttribute("id");

        if (top >= offset && top < offset + height) {
            dotNav.forEach((dot) => {
                dot.classList.remove("navDot-active");
                document.querySelector(".dot-navigation div a[href*=" + id + "]").classList.add("navDot-active");
            });
        }
    });
};

  2. 0

    Listen for scroll events, find the currently displayed region, and highlight the navigation elements as necessary.

    window.addEventListener('DOMContentLoaded', updateNav);
window.addEventListener('scroll', updateNav);

function updateNav() {
  const currentRegion = [...document.querySelectorAll(".region:not([id=''])")]
    .find(e=>e.getBoundingClientRect().top>=0)
    
  if(currentRegion) {
    window.location.hash = `#${currentRegion.id}`;
    
    [...document.querySelectorAll(`a:not([href='#${currentRegion.id}'])`)]
      .forEach(a=>a.classList.remove('red'))
      
    document.querySelector(`a[href='#${currentRegion.id}']`)?.classList.add('red')
  }
}
    a { text-decoration:none; color: black}
.red { color: red; }
.region { margin-left: 100px; min-height: 500px; }
.dot-navigation { position:fixed }
    <div class="dot-navigation">
  <div><a href="#home">o</a></div>
  <div><a href="#about">o</a></div>
  <div><a href="#services">o</a></div>
  <div><a href="#clients">o</a></div>
  <div><a href="#reviews">o</a></div>
  <div><a href="#contactus">o</a></div>
</div>
<div class="region" id="home">home...</div>
<div class="region" id="about">about...</div>
<div class="region" id="services">services...</div>
<div class="region" id="clients">clients...</div>
<div class="region" id="reviews">reviews...</div>
<div class="region" id="contactus">contactus...</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search